1、命名视图的显示
<router-view name='组件名'></router-view>
<router-view name='组件名'></router-view>
<router-view ></router-view>
2、因为是在一个页面显示,路径唯一,所以组件都是一个路由中的组件
{
path: '/',
name: 'HelloWorld',
components:{
组件名:A,
组件名:B,
default:C
}
}
当来到'/'页面时,视图会显示对应组件内容,未命名的视图用default:组件,来匹配
代码示例:
App.vue文件:
<template>
<div id="app">
<!-- 导航 -->
<router-view name='nav'></router-view>
<!-- 侧边栏 -->
<router-view name='aside'></router-view>
<!-- 主要内容 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data()
{
return{
}
}
}
</script>
<style scoped >
*{
margin:0;
padding: 0;
}
</style>
总路由文件:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import A from '@/components/A'
import B from '@/components/B'
import C from '@/components/C'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
components:{
nav:A,
aside:B,
default:C
}
}
]
})