Vue学习-刷新界面动态路由丢失

关注

原创最新推荐文章于 2026-09-10 12:38:49 发布 5.8k 阅读 AI 写同款· GEO 优化 ›

vue3动态路由+页面刷新丢失路由+再次加载路由注：这里会衍生出一个问题，第一次登录的时候，路由信息没加进去，会跳404，所以这里需要做一个判断，判断路由to.matched这个去哪里的路由信息数组有没有数据，没有就再次添加动态路由信息，还有这块需要添加一个全局标识isAddAgain是否需要重新加载路由。动态路由添加后，每次刷新页面空白，这是因为刷新后路由守卫没再次走一遍，这里就需要在App.vue里面做判断，重新添加路由信息并跳转刷新前路由。目前路由只有静态的页面，我们需要做动态路由，需要在路由守卫router.beforeEach中添加。阅读详情

Vue

前言
- 页面刷新，路由重新初始化，通过动态路由方式添加的路由因而被清除
- - 1.通过路由守卫解决

前言

页面刷新，路由重新初始化，通过动态路由方式添加的路由因而被清除

1.通过路由守卫解决


//路由守卫
router.beforeEach((to, from, next) => {
  iView.LoadingBar.start();
  //console.log("store",store);
  //处理刷新界面动态路由丢失问题
  let userToken = store.state.users.currentUser.UserToken;
  if(userToken){
    //动态数组丢失说明用户刷新了页面
    if(store.state.users.routers.length == 0){
      //从localStorage中获取菜单树。然后重新加载路由
      let menuRoutes = [];
      menuRoutes = util.initMenu(menuRoutes,JSON.parse(localStorage.getItem("menuData")));
      store.commit('users/updateRouter',menuRoutes);
      //确保addRoutes()时动态添加的路由已经被完全加载上去。
      next({ ...to, replace: true })
    }else{
      next();
    }
  }else{
    next();
  }
});