需求:项目为分模块开发,监听到路由地址变化后会动态加载对应的模块,从而动态为框架添加相应的路由
但是有些路由是框架内的页面,有些路由是根路由,比如登录页面是根路由页面,占据整个页面,而业务页面是框架内的页面,框架包含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'
        },)
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐