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

前言

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

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