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 中是个好的实现方式。
在下个版本需求还有这个需求，会着重处理这两个地方。
结语
这个只是动态添加路由得实现，还要根据自己的业务需求来进一步处理。我的这个项目比较大。业务需求比较复杂，动态添加的路由要跟很多地方结合起来，好多坑都是没有想到的。也是第一次实现这样的功能，改进、优化的地方还有很多，会继续研究一下这块。
