嵌套路由配置

路由嵌套是非常常见的需求。

在创建的时候将路由集成进去。

一.创建二级页面并实现由一级到二级页面跳转

在src->views文件夹下创建AboutSub文件夹，在该文件夹下创建Aboutme.vue和Aboutinfo.vue文件。设计这两个文件的样式。

2.在src->router->index.js里配置二级路由。

 {
    path: '/about',
    name: 'about',
    component: () => import( '../views/AboutView.vue'),
    children:[
      {
        //二级导航的路径不要加/
        path:'me',
        component:()=>import('../views/AboutSub/Aboutme.vue')
      },
      {
        path:'info',
        component:()=>import('../views/AboutSub/Aboutinfo.vue')
      }
    ]
  }

3.实现由一级路由跳转至二级路由。（在src->AboutView.vue中添加）

<template>
  <div class="about">
    <router-link to="/About/me">关于我</router-link>  |
    <router-link to="/About/info">关于信息</router-link>
    <router-view></router-view>
   <!-- router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view  一组router-view代表一个组件-->
  </div>
</template>

4.重定向配置（在点击一级跳转二级页面时，下方会显示二级页面第一个页面）

在src->router->index.js中添加。

 {
    path: '/about',
    name: 'about',
    redirect:'/about/me', //加入此行
    component: () => import( '../views/AboutView.vue'),
    children:[
      {
        //二级导航的路径不要加/
        path:'me',
        component:()=>import('../views/AboutSub/Aboutme.vue')
      },
      {
        path:'info',
        component:()=>import('../views/AboutSub/Aboutinfo.vue')
      }
    ]
  }

如有任何问题或错误，欢迎讨论与批评指正！