vueRouter动态添加根路由和子路由

需求:项目为分模块开发,监听到路由地址变化后会动态加载对应的模块,从而动态为框架添加相应的路由
但是有些路由是框架内的页面,有些路由是根路由,比如登录页面是根路由页面,占据整个页面,而业务页面是框架内的页面,框架包含header、aside、main等,路由页面在main显示。
实现:router.addRoute()方法

const router = new Router({
	routes:[]
})

动态添加根路由:

router.addRoute(route)

动态添加子路由:

router.addRoute(parentName, route)

其中parentName为父级路由定义的name字段。
举例:

const router = new Router({
  routes: [

    {
      path: '/',
      name: 'Baselayout',
      component: () => import('../layout/BaseLayout'),
      children: [
        {
          path: 'framepane',
          props: (route) => ({ frameName: store.getters['menu/getCurrentMenuId'] }),
          component: () => import('../components/FramePane')
        }
      ]
    }
  ]
})
 router.addRoute('Baselayout',  {
          path: 'noconfig',
          component: () => import('../components/NoConfig'),
          name: 'NoConfig'
        },)
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值