vue + vue-router路由视图命名+路由嵌套

页面布局是：

+-----------------------------------+
+导航                                +
+-----------------------------------+
+左侧菜单+内容区域                     +
+-------+---------------------------+

开始用组件来做导航和左侧菜单，但是发现this.$route.name拿不到，一直为null.于是想到用多路由视图来做，因为在路由视图里面的组件，this.$route.name是可以拿到的。

布局：

app.vue

<template>
<div class="layout">
<router-view name="nav"></router-view>
<div class="layout-content">
<router-view></router-view>
</div>
<div class="layout-copy">
2011-2016 © TalkingData
</div>
</div>
</template>
<style scoped>
.layout{
border: 1px solid #d7dde4;
background: #f5f7f9;
}
.layout-content{
min-height: 200px;
margin: 15px;
overflow: hidden;
background: #fff;
border-radius: 4px;
}
.layout-copy{
text-align: center;
padding: 10px 0 20px;
color: #9ea7b4;
}
</style>
<script>
export default {
name: 'App'
}
</script>

nav.vue

<template>
<Menu mode="horizontal" theme="dark" :activeName="activeName">
<div class="layout-logo"></div>
<div class="layout-nav">
<router-link :to="{name: item.name}" v-for="item in nav_list" :key="item.id">
<Menu-item :name="item.name">
<Icon :type="item.icon" v-if="item.icon != ''"></Icon> {{item.title}}
</Menu-item>
</router-link>
</div>
</Menu>
</template>
<style scoped>
.layout-logo{
width: 100px;
height: 30px;
background-color: transparent;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
/*background: url(http://mfw.com/data/upload/shop/common/04916705863629842.png) no-repeat 50% 0;*/
background-size: contain;
}
</style>
<script>
export default {
data () {
return {
nav_list: [
{id: 1, title: '首页', name: 'home', icon: 'home', url: '/'},
{id: 2, title: '系统', name: 'system', icon: 'paper-airplane', url: '/system'},
],
activeName: ''
};
},
mounted () {
//            let [name] = this.$route.name.split('-');
//            this.activeName = name;
}
}
</script>

left.vue

<template>
<Menu width="auto" :open-names="openMenu" :active-name="activeName" theme="dark">
<Submenu :name="item.id" v-for="item in leftMenus" :key="item.id">
<template slot="title">
<Icon :type="item.icon" v-if="item.icon"></Icon>
<span>{{item.title}}</span>
</template>
<router-link :to="val.url" v-for="val in item.children" :key="val.id">
<Menu-item :name="item.id + '-' + val.id">
{{val.title}}
</Menu-item>
</router-link>
</Submenu>
</Menu>
</template>
<script>
export default {
data () {
return {
leftMenus: [],
activeName: '',
openMenu: [],
};
},
mounted () {
let left = {
home: [],
system: [
{id: 3, title: '用户', icon: 'ios-navigation', children: [
{id: 4, title: '用户管理', icon: '', url: '/system/user'},
{id: 5, title: '用户组管理', icon: '', url: '/system/group'},
]},
],
};
//            let [name, subName] = this.$route.name.split('-');
this.leftMenus = left.system;
//            if(this.leftMenus.length > 0)
//                this.openMenu = [this.leftMenus[0].id];
}
}
</script>

main.vue

<template>
<Row>
<i-col span="5">
<router-view name="left"></router-view>
</i-col>
<i-col span="19">
<div class="layout-content-main">
<router-view></router-view>
</div>
</i-col>
</Row>
</template>
<style scoped>
.layout-content-main{
padding: 10px;
}
</style>
<script>
export default {}
</script>

user.vue

<template>
<div>
{{message}}
</div>
</template>
<script>
export default {
name: 'User',
data () {
return {
message: 'a user vue',
};
},
mounted () {
console.log('i am user vue');
}
}
</script>

路由：

const routers = [
{
path: '/',
meta: { title: '控制台'},
// name: 'home',
components: {
default: (resolve) => require(['./views/girl/main.vue'], resolve),
nav: (resolve) => require(['./nav.vue'], resolve),
},
children: [
{
path: 'home',
components: {
left: resolve => require(['./left.vue'], resolve),
default: resolve => require(['./views/home.vue'], resolve),
},
name: 'home',
},
{
path: 'system',
name: 'system',
components: {
left: resolve => require(['./left.vue'], resolve),
default: resolve => require(['./views/girl/layout.vue'], resolve),
},
children: [
{
path: 'user',
name: 'system-user',
component: resolve => require(['./views/girl/user.vue'], resolve)
},
{
path: 'group',
name: 'system-group',
component: resolve => require(['./views/girl/group.vue'], resolve)
}
],
redirect: '/system/user'
}
],
redirect: '/home',
},
{
path: '*',
redirect: '/home',
}
];
export default routers;

需要理解的地方：

视图命名和路由嵌套,开始就是因为这两个概念没有理解透彻，折腾很久。
https://router.vuejs.org/zh-cn/essentials/named-views.html