vue 二级三级路由配置

最终效果：

二级嵌套三级index.js页面路由配置：

二级：在所在页面路由对象里，加children:[继续配置路径]，页面path可以自己定义

三级：和二级一样

 {
      path: '/about',
      name: 'about',
      component: about,
      redirect: '/about/home',
      children: [
        {
          path: '/about/home',
          name: 'home',
          component: home,
        },
        {
          path: '/about/news',
          name: 'news',
          component: news
        },
        {
          path: '/about/project',
          name: 'project',
          component: project
        },
        {
          path: '/about/user',
          name: 'user',
          component: user,
          children: [
            {
              path: '/myphone', name: myphone, component: myphone
            },
            {
              path: '/myname', name: myname, component: myname
            },
          ]
        },
      ]
    },

二级跳转html代码：

        <router-link to="/Baidusearch" class="navbar-brand">百度搜索</router-link>
        <ul class="navbar-nav">
          <li><router-link to="/game" class="nav-link">游戏</router-link></li>
          <li><router-link to="/Tab" class="nav-link">选项卡</router-link></li>
          <li><router-link to="/shopcar3" class="nav-link">购物车</router-link></li>
          <li><router-link to="/about" class="nav-link">about</router-link></li>
        </ul>
        <ul class="navbar-nav ml-auto">
          <li><router-link to="/linklogin" class="nav-link">登陆</router-link></li>
          <li><router-link to="/register" class="nav-link">注册</router-link></li>
        </ul>

三级跳转html代码：

           <router-link tag="li" class="nav-link" to="/about/home">
              <a class="list-group-item list-group-item-action">爱的小屋</a>
            </router-link>
            <router-link tag="li" class="nav-link" to="/about/news">
              <a class="list-group-item list-group-item-action">个人新闻</a>
            </router-link>
            <router-link tag="li" class="nav-link" to="/about/project">
              <a class="list-group-item list-group-item-action">我的项目</a>
            </router-link>
            <router-link tag="li" class="nav-link" to="/about/user">
              <a class="list-group-item list-group-item-action">个人信息</a>
            </router-link>