Vue-Router路由嵌套
原文地址：http://www.hxstrive.com/article/596.htm
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
上图中，用户管理（/user）为一级路由，而基础信息（/user/baseInfo）或电子邮件（/user/emails）为二级路由。下面我们将介绍怎样使用vue-router来实现这个Demo。
在开始之前我们使用 “vue init webpack vue-router-test”创建“vue-router-test”vue项目。在创建过程中，请选择安装 vue-router 组件（如果不会创建，则参考Vue-Router入门文章）。
下图是项目的结构：
其中：Home.vue（主页）、User.vue（用户管理）一级路由，Phones.vue（联系方式）和Emails.vue（电子邮件）二级路由。具体代码如下：
Home.vue
<template>
<div class="home">
<h1>主页 - Home</h1>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style scoped></style>
User.vue
<template>
<div class="user">
<div class="list-container">
<!-- 二级路由导航 -->
<router-link to="/user/emails">电子邮件</router-link>
<router-link to="/user/phones">联系方式</router-link>
</div>
<div class="content-container">
<!-- 二级路由展示容器 -->
<router-view/>
</div>
</div>
</template>
<script>
export default {
name: 'User'
}
</script>
<style scoped>
.list-container, .content-container {
float: left;
width: 140px;
height: 300px;
background: #F0F0F0;
border: solid 1px #333;
margin-top: 10px;
text-align: left;
}
.list-container a {
display: block;
margin: 3px 0px;
text-decoration: none;
padding-left: 10px;
}
.list-container a.router-link-active {
color: orangered;
font-weight: bold;
}
.content-container {
width: 468px;
height: 300px;
text-align: center;
background: #F0F0F0;
border: solid 1px #333;
margin-left: 10px;
}
</style>
Emails.vue
<template>
<div class="emails">
<h2>用户的电子邮件管理</h2>
</div>
</template>
<script>
export default {
name: 'Emails'
}
</script>
<style scoped></style>
Phones.vue
<template>
<div class="phones">
<h2>用户联系方式管理</h2>
</div>
</template>
<script>
export default {
name: 'Phones'
}
</script>
<style scoped></style>
App.vue
<template>
<div id="app">
<div class="navigator">
<!-- 一级路由导航 -->
<router-link to="/home">主页</router-link>
<router-link to="/user">用户管理</router-link>
</div>
<div class="content">
<!-- 一级路由展示容器 -->
<router-view/>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.navigator {
text-align: left;
padding: 10px;
background: #F0F0F0;
border: solid 1px #333;
width: 600px;
}
.navigator a {
background: lightgreen;
border: solid 1px green;
padding: 4px 8px;
text-decoration: none;
}
.navigator a:hover, .navigator a.router-link-active {
background:orange;
}
</style>
index.js
该文件位于router/index.js，用来配置 vue-router。代码如下：
import Vue from 'vue'
// 导入 vue-router 组件
import Router from 'vue-router'
// 导入自己的组件
import Home from '@/components/Home'
import User from '@/components/User'
import Emails from '@/components/Emails'
import Phones from '@/components/Phones'
// 使用 vue-router 路由组件
Vue.use(Router)
export default new Router({
routes: [
// 一级路由配置
{path: '/home', name: 'Home', component: Home},
// redirect表示进入 /user 路由时，默认路由到 /user/emails
{path: '/user', name: 'User', redirect:'/user/emails', component: User, children: [
// 二级路由配置
{path: '/user/emails', component: Emails},
{path: '/user/phones', component: Phones}
]}
]
})
下图是最终运行效果图：
其中：主页/用户管理是一级路由，电子邮件和联系方式是二级路由。
总结：
嵌套路由是在路由下面的children属性下面添加路由信息。如下：
export default new Router({
routes: [
{path: '/home', name: 'Home', component: Home},
{path: '/user', name: 'User', component: User, children: [
{path: 'emails', component: Emails},
{path: 'phones', component: Phones}
]}
]
})
如果你在访问/user时，不会渲染任何东西。这是因为没有匹配的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：
export default new Router({
routes: [
{path: '/home', name: 'Home', component: Home},
{path: '/user', name: 'User', component: User, children: [
{path: '', component: Emails},
{path: 'emails', component: Emails},
{path: 'phones', component: Phones}
]}
]
})