嵌套路由的实现

嵌套路由，也被称为“多级路由”。
先看例子吧，项目目录如下。

路由的基本使用

关于路由的基本使用，详见 路由的基本使用。

嵌套路由（多级路由）

• 修改路由组件Home.vue

<template>
  <div>
    <h2>Home组件内容</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
        </li>
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
        </li>
      </ul>
      <div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name:'Home'
}
</script>

<style>

</style>

• 新增路由组件News.vue

<template>
    <ul>
        <li>news001</li>
        <li>news002</li>
        <li>news003</li>
    </ul>
</template>

<script>
export default {
    name:"News"
}
</script>

<style>

</style>

• 新增路由组件Message.vue

<template>
    <ul>
        <li>
            <a href="/message1">message001</a>&nbsp;&nbsp;
        </li>
        <li>
            <a href="/message2">message002</a>&nbsp;&nbsp;
        </li>
        <li>
            <a href="/message/3">message003</a>&nbsp;&nbsp;
        </li>
    </ul>
</template>

<script>
export default {
    name:"Message"
}
</script>

<style>

</style>

• 修改router/index.js，增加路由规则

import VueRouter from "vue-router";
import Home from "../pages/Home";
import About from "../pages/About";
import News from "../pages/News";
import Message from "../pages/Message";

export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home,
            children:[
                {
                    path:"message",
                    component:Message
                },
                {
                    path:"news",
                    component:News
                }
            ]
        }
    ]
})

重启项目，测试效果。

注意点

1. 嵌套路由时，配置路由规则，如下。

export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home,
            children:[
                {
                    path:"message",
                    component:Message
                },
                {
                    path:"news",
                    component:News
                }
            ]
        }
    ]
})

2. routerLink实现切换（active-class设置高亮样式）、routerView指定展示位置。
3. routerLink实现二级路由切换时，注意跳转路径应为完整路径，如/home/news、/home/message。

<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>