1. 动态路由存储中的缓存问题
需求:根据不同用户,显示不同的菜单。
用户登录时,把获取回来的菜单注册到路由里。但是每次刷新之后,页面出现空白。原因是因为当页面刷新时,router.addRoutes()注册路由会被清空。
当将动态路由存进缓存(vuex
、sessionStorage
/localStorage
)中时,在退出登录或者token
过期失效时需将其清除。
注意:不能直接把
Routers
格式的数据直接存储到缓存,经过JSON.Stringfy()
,JSON.Parse()
处理之后,component
里的render()
等函数会丢失,导致无法重新注册router.addRoutes()
到路由里
2. vue-router 动态路由 刷新页面后query参数消失
分析:当浏览器刷新时,触发导航守卫的beforeEach
方法等,只有在 next(path: to.path)
时改变了路由参数
解决:将 next(path: to.path)
修改为 next(path: to.fullPath)
(fullPath是完成解析后的 URL,包含查询参数和 hash 的完整路径),这样就不会发生 query
参数消失问题。