当一个页面想展示多个视图,而不是嵌套展示时,就需要使用命名视图。在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果router-view
没有设置名字,则默认的名字为default
<!-- 设置多个视图出口 -->
<router-view></router-view>
<router-view name="leftMenu"></router-view>
<router-view name="rightContent"></router-view>
由于一个视图出口渲染一个对应的组件,因此,对于同一个路由,多个视图就需要多个组件。在路由配置中components
组件配置必须带有s
<script>
const router = new VueRouter({
routes: [
path: '/',
components: {
'default': Header,
'leftMenu': Menu,
'rightContent': Content
}
]
})
</script>
原文:https://www.cnblogs.com/yuxi2018/p/11967271.html