官方文档:命名视图
问题:在制作类似youtube的官网的时候,用到了公共头部,侧边栏以不同方式展现,中心部分三大部分内容,为了实现单页面,需要分成多个视图。
- 有时候想同级展示多个视图,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了。
- 你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。
一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置(带上 s):
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})