Vue-router多级路由（嵌套路由）

配置路由规则，使用children配置项：

//引入VueRouter
import VueRouter from 'vue-router'
// 引入组件
import About from "../pages/About";
import Home from "../pages/Home";
import Message from '../pages/Message';
import News from '../pages/News';

//创建router实例对象，去管理一组一组的路由规则
export default new VueRouter({
    // 配置路由规则
    routes: [
        {
            // 路由重定向
            path: "/",
            redirect: '/home'
        },
        {
            path: '/about',
            component: About,
            //通过children配置子级路由
            children: [
                {
                    //此处一定不要写：/message （子级路由不要写/）
                    path: 'message',
                    component: Message,
                },
                {
                    path: 'news',
                    component: News,
                }
            ]
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'message',
                    component: Message,
                },
                {
                    path: 'news',
                    component: News,
                }
            ]
        }
    ]
})

跳转（要写完整路径）：

<template>
    <div>
    <h2>我是Home的内容</h2>
    <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>
    <router-view></router-view>
  </div>
</template>