1.问题
项目后台需要做权限管理,不同用户需要加载不同的路由,在用户登录后,拿到帐号有权限访问的路由,储存在vuex中,再渲染菜单。
这种方法刷新的话vuex中的数据会消失,储存的路由也消失,页面会白屏(没有对应的路由)
2.解决思路
通过路由守卫判断页面刷新后,重新注册路由,再渲染
3.下载插件
npm i vuex-along -S
刷新后恢复vuex中的数据
引入插件
4.判断页面刷新
//后置守卫
router.afterEach((to,from)=>{
//页面刷新
if(from.path=='/'&&to.path!='/login'){
//拿到保存在vuex中的路由数据
//这里也可以调接口拿到路由数组,如果不想用插件的话这里就调后台接口拿数组
let routes=store.state.childrenRouters
const routerList=[]
for(let i=0;i<routes.length;i++){
let route={
path:routes[i].path,
name:routes[i].name,
component:()=>import(`@/components${routes[i].path}`)
}
routerList.push(route)
}
//添加路由
store.commit('setRouter',routerList)
store.dispatch("generateAddRouters");
//注册路由
router.addRoutes(store.state.addRouters);
router.options.routes[1].children=store.state.childrenRouters;
//跳转到首页
router.push(`${store.state.childrenRouters[0].path}`)
}
})