vue动态加载路由后刷新白屏问题

最新推荐文章于 2025-07-09 12:58:04 发布

原创最新推荐文章于 2025-07-09 12:58:04 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了在Vue.js项目中实现权限管理的方法，当用户登录并存储权限路由在Vuex中时，遇到刷新导致数据丢失的问题。解决方案包括使用路由守卫在页面刷新后重新获取和注册路由，通过 vuex-along 插件恢复Vuex状态，并详细阐述了相关代码实现过程。

文章目录

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}`)
  }
})