vue-router 多层嵌套 空子路由问题

问题描述

问 题

• 问题是这样的，嵌套了三层路由

• 想路由匹配到第一层的时候可以同时渲染第二层路由跟第三层路由的组件

• 但是现在访问第一层路由的时候，只渲染了第一层跟第二层的组件，第三层的没有渲染出来

上代码(路由设计，就不上组件代码了（太多代码了），给路由地址访问都是没问题，用的是<router-view>渲染组件)：

 {
    path: '/level1',
    component: level1,
    meta: {
      name: 'level1',
      requiresAuth: true
    },
    children: [{
      path: '',
      component: level2,
      meta: {
        name: 'level2',
        requiresAuth: true
      }
    }, {
      path: 'level2',
      component: level2,
      meta: {
        name: 'level2',
        requiresAuth: true
      },
      children: [{
        path: '',
        component: level3,
        meta: {
          name: 'level2',
          requiresAuth: true
        }
      }, {
        path: 'level3',
        component: level3,
        meta: {
          name: 'level2',
          requiresAuth: true
        }
      }]

• 暂时没有找到问题，没有解决办法- -

• 补充一下，暂时找到一个解决方法，这个方法暂时还没发现会导致什么毛病

 {
    path: '/level1',
    component: level1,
    meta: {
      name: 'level1',
      requiresAuth: true
    },
    children: [{
      path: '',
      component: level2,
      meta: {
        name: 'level2',
        requiresAuth: true
      }
    }, {
        path: '',
        component: level3,
        meta: {
          name: 'level2',
          requiresAuth: true
        }
      }, {
      path: 'level2',
      component: level2,
      meta: {
        name: 'level2',
        requiresAuth: true
      },
      children: [{
        path: '',
        component: level3,
        meta: {
          name: 'level2',
          requiresAuth: true
        }
      }, {
        path: 'level3',
        component: level3,
        meta: {
          name: 'level2',
          requiresAuth: true
        }
      }]

解决方案

暂时找到的解决方法补充到问题里面了

这篇关于vue-router 多层嵌套 空子路由问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！