美文网首页前端开发那些事儿
解决$router.addRoutes()添加路由,出现的路由重

解决$router.addRoutes()添加路由,出现的路由重

作者: 小枫学幽默 | 来源:发表于2020-08-05 09:54 被阅读0次

    背景

    用户登录之后,用 vue-router的addRoutes方法添加了五个路由表,用户点击退出登录之后,重新登录,获取用户信息后,重新获取用户的动态路由,再用addRoutes方法添加这五个路由,因为路由名重复了,所以vue-router会提示路由重复,如下图


    image.png

    出现原因

    当退出登录时,页面没有刷新,只是删除token等用户登录时存储的信息,vue实例上挂载的vue-router的路由表,并没有重置,所以上次登录之后用addRoutes方法添加的路由没有删除掉,自然会出现第二次去添加的时候重复的问题

    解决方案

    • 1、退出登录时候用 location.reload(); (能解决的原因就是刷新页面之后所有的vue实例上的变量都重置了,包括路由)
    • 2、当退出登录时,重置路由即可,此解决方案是从这儿找到的https://github.com/vuejs/vue-router/issues/1234
    image.png
    
    import Vue from "vue";
    import Router from "vue-router";
    import { constantRouterMap } from "@/config/router.config";
    
    Vue.use(Router);
    
    // export default new Router({
    //   mode: "history",
    //   routes: constantRouterMap
    // });
    
    const createRouter = () =>
      new Router({
        mode: "history",
        routes: constantRouterMap
      });
    
    const router = createRouter();
    
    // 定义一个resetRouter 方法,在退出登录时,调用即可
    export function resetRouter() {
      const newRouter = createRouter();
      router.matcher = newRouter.matcher;
    }
    
    export default router;
    
    
    image.png

    相关文章

      网友评论

        本文标题:解决$router.addRoutes()添加路由,出现的路由重

        本文链接:https://www.haomeiwen.com/subject/vqakrktx.html