路由嵌套（子路由设置）

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. 简化浏览器访问子文件路径

简化为 -->

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
        }
      ]
    }
  ]
})

本站以现代、古代情诗为主，情诗网创办于2013年，以原创爱情诗歌、经典情诗、现代情诗、古代情诗、英文情诗、情诗绝句为主并收集古诗、古诗词、诗歌大全、诗词名句的文学门户。方便您下次继续阅读；可以放在浏览器的收藏夹中（快捷键Ctrl+D）;或者看到喜欢或者有趣的诗词可以通过分享按钮给你的好友分享；情诗网是目前最全情诗大全网站之一。并欢迎广大诗歌爱好者阅览投稿！喜欢本站的话请大家把本站告诉给你朋友哦！地址是 www.qingshiwang.com ！