原则:一个视图使用一个组件渲染,因此对于同个路由,多个同级视图就需要多个组件
1.首先,在需要显示多个同级视图的单个路由里设置多个组件:mponents 配置 (带上 s)
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
2.在渲染的模板里添加渲染出口,用name属性对应在路由里注册的多个组件;没有设置名字,默认为 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>