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_id let path = routerName children.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 }).matcher router.addRoutes(params)}复制代码 - 使用时：
this.$router.$addRouters(params)
问题二
描述：
- 第二个就是一个比较大的问题了。动态添加的路由，刷新页面后就 消失 了。
解决：
- 我现在的做法是，在全局导航守卫中监听，在动态添加路由得板块中时，路由变化就重新添加。做法跟上述添加路由得方式一样，就是再操作了一遍；
router.beforeEach((to, from, next) => { // 代码就不复制了,跟上面是一样的。})复制代码 反思
- 刚开始添加路由的时候，是通过路径直接添加的新增路由,
path拼接 ：
path: '/constructionSystem/buildInfo', 但是这样不能实现，必须得把一级、二级路由写上。自我感觉，拼接 path 是应该可以的，估计还有哪个点我没考虑到，由于赶项目也没有多尝试，等项目上线了，这块再好好搞一下。
-
另外一个就是刷新页面的时候动态添加的路由丢失，我的处理方法，用全局导航守卫显然是不合理的，因为只有在刷新的时候才会丢失，路由切换的时候没有必要去重新添加路由。放到 vuex 中是个好的实现方式。
-
在下个版本需求还有这个需求，会着重处理这两个地方。
结语
这个只是动态添加路由得实现，还要根据自己的业务需求来进一步处理。我的这个项目比较大。业务需求比较复杂，动态添加的路由要跟很多地方结合起来，好多坑都是没有想到的。也是第一次实现这样的功能，改进、优化的地方还有很多，会继续研究一下这块。