vueRouter-命名视图 原
有时候想同时展示多个视图，而不是嵌套展示，例如创建一个布局，有sidebar(侧导航)和（主内容）2个视图，这个时候命名视图就派上用场了。 你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口，如果router-view没有设置名字，那么就默认为default <router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view> 一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件，确保正确使用components
<body class="">
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<div id="app">
<h1>Named Views</h1>
<ul>
<li>
<router-link to="/">/</router-link>
</li>
<li>
<router-link to="/other">other</router-link>
</li>
</ul>
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
</div>
<script>
const Foo = { template: `<div>foo</div>` }
const Bar = { template: `<div>bar</div>` }
const Baz = { template: `<div>baz</div>` }
const router = new VueRouter({
//mode:"history",
routes: [{
path: "/",
components: {
default: Foo,
a: Bar,
b: Baz
}
},
{
path: "/other",
components: {
default: Baz,
a: Bar,
b: Foo
}
}
]
})
const app = new Vue({ router }).$mount("#app")
</script>
</body>(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017/09/12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读