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