vue路由踩坑之路

vue路由踩坑

vue-router是我们在使用vuejs做项目时很大几率会用到的技术，之前用的比较浅，没有发现什么问题，但是后来遇到一个路由嵌套的问题，踩进去了。再次写下笔记记录


vue-router在使用路由嵌套的时候。一般情况下使用两层路由嵌套是很少会出现问题的。那么我不再描述路由的基本用法。我记录的是三层以上路由嵌套需要注意的问题
加入说我们有这样的一个需求，
// 一个路由根组件app.vue
// 多个导航组件nav
// 每个导航组件里面有多个菜单栏
假如我们点击导航栏里面的某一个菜单，之后刷新页面，我们要让页面停留在之前点击的菜单界面。我们就可以使用vue路由嵌套来轻松实现。
效果如图


// 首先说路由配置文件 

router.js
export default new Router({
  routes: [
    {
      path: '/',
      component: main,
      children: [
        {
          path: 'nav1',
          component: require( '@/components/nav1' ),
        },
        {
          path: 'nav2',
          component: require( '@/components/nav2' ),
        },
        {
          path: 'nav3',
          component: require( '@/components/nav3' ),
          children: [
            {
              path: 'item1',
              component: require('@/components/children/item1')
            },
            {
              path: 'item2',
              component: require('@/components/children/item2')
            },
            {
              path: 'item3',
              component: require('@/components/children/item3')
            }
          ]
        },
      ],
    },
  ],
})

// 首先把路由规则配置好。规则里面。由于我们是使用children嵌套的子路由规则，在写子路由规则是不必附带父路由名字，vue-router会自动渲染，使用时path直接写路由名字不必添加其他的字符。比如 / 等；

““
// 接下来是 的跳转path

nav1
nav2
nav3

// 在这个里面使用的path 需要在前面加上 /根路由也就是父组件的路径来固定路由跳转，

// 其次是第三层路由的跳转规则

item1
item2
item3
// 在第三层路由里面需要加上第二层跳转路由的路径 /nav3/item* 才能正确渲染路由组件
““


// 在这里主要要说的有两个地方，一个是router.js文件的规则。
// 另外一个是<router-link>的跳转规则，只要把这两个写好。就能正确渲染路由组件。实现开头所说的需求
// 这里没有提到四层以上的路由。由于我没有测试。所以暂时不提，后期不上，如果有需求的。可以按照这个规则自己测试，应该也不是难事了。毕竟有了第三层的基础。