解决动态路由刷新失效的方案

36 阅读1分钟

用权限生成的动态路由刷新后会丢失,2 种方案可解决

1.刷新后在路由拦截里判断是否有动态路由生成
没有则调用动态路由生成函数

router.beforeEach((to, from) => {
  if (to.path == "/login") {
    //退出登录,清除token
    localStorage.removeItem("token");
    store.commit("setUserInfo");
    router.removeRoute("backstage");
    return true;
  } else if (!localStorage.getItem("token")) {
    return { name: "login" };
  } else {
    if (!store.state.dynamicStatus) {
      getDynamicRoutes();
      return { path: to.fullPath };
    } else {
      return true;
    }
  }
});

2.在 app mount 前调用动态路由生成函数,好处是在开发模式下不会提示
[Vue Router warn]: No match found for location with path

//main.js
const boot = async () => {
  await getUserRoutes();
  app.use(router).use(store).mount("#app");
};

boot();

OK了家人们!