多级路由如下：
// http://localhost:8080/#/home/tongzhi
添加children属性配置path，component

index.js

// 导入路由插件
import VueRouter from "vue-router"

// 导入组件
import About from '../pages/About'
import Home from '../pages/Home'
import TongZhi from '../pages/TongZhi'
import Message from '../pages/message'
import Detail from '../pages/detail'
// 实例化VueRouter
export default new VueRouter({
 // 配置路由规则，route是VueRouter构造函数的配置。和vue的data一样的内置配置
 routes:[
  {
   // 配置浏览器的路径名字，比如
   // http://localhost:8080/#/about
   path:'/about',
   // 跳转到哪个路径就显示哪个组件
   component:About
  },
  {
   path:'/home',
   component:Home,
  //  http://localhost:8080/#/home/tongzhi
  // 这种信息的多级路由，用children属性，path不能添加/，因为vue会自动解析添加/,
  // 然后把前面的目录进行拼接，结果是 http://localhost:8080/#/home/tongzhi
   children:[
    {
     path:'tongzhi',
     component:TongZhi
    },
    {
     path:'message',
     component:Message,
     children:[
//和message路径进行拼接
 //结果是 http://localhost:8080/#/home/message/detail
      {
       path:'detail',
       component:Detail
     }
     ]
    }
   ]
  }
 ]
})

home.js

<template>
  <div>
    <router-link to="/home/tongzhi">通知</router-link>
    <router-link to="/home/message">信息</router-link>
    <!-- 展示自己的子路由组件，要记得添加router-view这个属性标签 -->
    <router-view></router-view>
  </div>
</template>

to里面的值（官方叫法，路由规则），一定要带上父路由规则

router下的index.js 文件

想嵌套多级路由，就在父路由规则小添加 children，然后里面添加path，component

path:'home'
 component:Home,
  //  http://localhost:8080/#/home/xxx
   children:[
      path:'xxx',
       component:rrr
]