Vue-动态添加路由-刷新失效问题

Vue-动态添加路由-刷新失效问题

前一篇写了实现如何动态添加路由的问题 点击进入, 由于赶项目，遗留了两个问题。现在算是基本解决了。

回顾

• 之前解决路由刷新失效的问题是通过全局导航守卫来实现的，虽说能实现，但没能从根本上解决。会重复多次添加路由。

解决

1、通过 localStorage

将需要添加的动态路由存入 localStorage 中，但 localStorage 存储的是 JSON 字符串，引入的 component 就失效了。

2、通过 vuex

关键代码

// 再添加之前，先判断是否进行了页面刷新（即 store 中是否还存有路由数据），若是刷新则将新增路由添加；
if (!this.newAddRoutes.length) {
  this.$router.addRoutes(routerData)
  // 更新 store 中的数据
  this.$store.commit('changeNewRoutes', routerData)
}

newAddRoutes: vuex 存储的动态路由数据
routerData： 要添加的动态路由数据
复制代码

总结

这样就保证了只在页面刷新的时候再重新对动态路由数据进行添加；

转载于:https://juejin.im/post/5d1c47566fb9a07f014f11ef