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: 要添加的动态路由数据
总结
这样就保证了只在页面刷新的时候再重新对动态路由数据进行添加;