Vue-动态添加路由
最近项目中有个需求 - 需要动态添加页面以及路由。过程很煎熬。但是实现之后,再看一下流程、代码,其实发现并没有多少东西。
添加嵌套的子路由
const children = []const routerData = [{// 一级路由path: '/constructionSystem',component: home,// 二级路由children: [{path: 'buildInfo',name: 'buildInfo',component: buildInfo,// 三级路由children}]}]// 后盾获取到数据, datadata.forEach((item, index) => {// 路由 name 用一个规则来动态添加(这里的 first_menu_id 是业务的某一个 ID)let routerName = 'common_' + item.first_menu_idlet path = routerNamechildren.push({path,name: routerName,// 指向的一个公共组件component: () => import('@/views/.../configurationPage')})})// 将新增路由添加;this.$router.addRoutes(routerData)复制代码
问题一
描述:
routerData 中的二级路由name: 'buildInfo'
,在定义路由的时候,此时是已经存在的了。当添加的时候等于重复添加了路由。关于重复路由得问题,Vue-Router 自动给处理了。但是在开发环境还是会有warning
警告的。
结果:
解决:
查了一下,可以用 Vue-Router 的matcher
来解决。
代码如下:
// 在 router/index.js 中 将 addRouter 方法封装一下router.$addRoutes = (params) => {router.matcher = new Router({mode: 'history',routes: router.options.routes}).matcherrouter.addRoutes(params)}复制代码
使用时:
this.$router.$addRouters(params)
问题二
描述:
第二个就是一个比较大的问题了。动态添加的路由,刷新页面后就消失了。
解决:
我现在的做法是,在全局导航守卫中监听,在动态添加路由得板块中时,路由变化就重新添加。做法跟上述添加路由得方式一样,就是再操作了一遍;
router.beforeEach((to, from, next) => {// 代码就不复制了,跟上面是一样的。})复制代码
反思
刚开始添加路由的时候,是通过路径直接添加的新增路由,path
拼接 :path: '/constructionSystem/buildInfo'
, 但是这样不能实现,必须得把一级、二级路由写上。自我感觉,拼接path
是应该可以的,估计还有哪个点我没考虑到,由于赶项目也没有多尝试,等项目上线了,这块再好好搞一下。
另外一个就是刷新页面的时候动态添加的路由丢失,我的处理方法,用全局导航守卫显然是不合理的,因为只有在刷新的时候才会丢失,路由切换的时候没有必要去重新添加路由。放到 vuex 中是个好的实现方式。
在下个版本需求还有这个需求,会着重处理这两个地方。
结语
这个只是动态添加路由得实现,还要根据自己的业务需求来进一步处理。我的这个项目比较大。业务需求比较复杂,动态添加的路由要跟很多地方结合起来,好多坑都是没有想到的。也是第一次实现这样的功能,改进、优化的地方还有很多,会继续研究一下这块。