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

最新推荐文章于 2025-04-09 20:02:16 发布

原创最新推荐文章于 2025-04-09 20:02:16 发布 · 5.7k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种在Vue.js应用中解决页面刷新导致动态路由丢失的问题。通过使用路由守卫来检查并重新加载动态路由，确保即使在页面刷新后也能保持正确的导航状态。

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();
  }
});