路由嵌套（子路由设置）

1. 子路由配置：
   • 在父级路由中添加children属性，值为子路由配置
   • 当想让某个子路由作为默认项时，path的值为空字符即可，并且在父组件中to属性中中需要填写父路由路径
   • 子路由有可能会嵌套很多层，这样会导致router-link的地址会很长，那样使用{name:'xxx'}就可以简化子路由地址
     • 注意：一旦设置了子路由，那么父路由就不要设置name属性，而是将父路由的name属性放到默认子路由中

xxx.vue 子路由嵌套位置（父组件）

<template>
    <div>
        关于我
        <hr>
        <ul class="nav">
            <router-link to="/about" exact tag="li">
                <a>study</a>
            </router-link>
            <router-link to="/about/silder" tag="li">
                <a>silder</a>
            </router-link>
            <router-link :to="{name:'work'}" tag="li">
                <a>work</a>
            </router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>

index.js 路由配置文件

export default new Router({
  mode: 'history',
  linkActiveClass: 'is-active',
  routes: [
    {
      path: '/about',     
      component: about,
      children: [
        {
          path: '', //默认子路由
          name: 'about',
          component: study
        },
        {
          path: 'silder',
          name: 'silder'
          component: silder
        },
        {
          path: 'work',
          name: 'work'
          component: work
        }
      ]
    }
  ]
})

2. 简化浏览器访问子文件路径

image.png

简化为 -->

image.png

index.js 路由配置文件

export default new Router({
  mode: 'history',
  linkActiveClass: 'is-active',
  routes: [
    {
      path: '/about',     
      component: about,
      children: [
        {
          path: '', //默认子路由
          name: 'about',
          component: study
        },
        {
          path: '/silder',    //只需要在子路由的路径上添加根目录即可
          name: 'silder'
          component: silder
        },
        {
          path: '/work',
          name: 'work'
          component: work
        }
      ]
    }
  ]
})