基于vue框架项目开发过程中遇到的问题总结（三）

这次遇到的一个问题困扰了我很久很久，大致就是vue路由的addRoutes方法的使用，每次在调用了这个之后router对象中并没有将路由添加进去，接下来，我一步一步的分析原因及解决方法（个人见解，仅供参考）

（1）先看看我的失败的代码

​

store.getters.addRouters我存在vuex中，但是实际是存于session中的，所以刷新后是不会丢失数据的

​

在app.vue的mounted输出this.$router对象，发现options.routes数组并没有将动态路由添加成功，这个问题困扰了很久，最后找到原因是执行了window.location.reload();使得页面重新加载了，解决办法是：在beforeEach里判断当前路由是否已经有动态路由了，如果没有则添加，并且拉取用户信息的处理不放在登录成功之后，这样就不会受reload的影响

（2）第二版代码

​

​

这样改了之后，理论上应该可以了，输出this.$router对象，发现options.routes数组还是没有将动态路由添加成功，

在网上找了解决方案，手动将需要添加的路由添加到options.routes数组（由于路由的所有信息我是在vuex存了的，所以直接全部赋值给了options.routes）

​

做到这一步，已经完成大部分了，options.routes数组有数据了，动态添加的路由可以正常跳转，页面也有内容，但是很快我又发现一个问题，动态添加的路由页面一刷新就凉凉了（空白），在地址栏输入其他动态添加的路由又是可以正常跳转的，这就很尴尬了。参考了https://github.com/PanJiaChen/vue-element-admin/blob/master/src/permission.js ，找到了解决方法

将next()换成next({ ...to, replace: true })，// hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record

进行到这一步，基本上就已经可以了，这个问题网上有很多类似，但是他们登录跟我不一样，也没有window.location.reload();这一步，所以解决起来还是有不一样的地方