addroutes刷新_解决$router.addRoutes()添加路由，出现的路由重复添加问题

背景

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

image.png

出现原因

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

解决方案

1、退出登录时候用 location.reload(); (能解决的原因就是刷新页面之后所有的vue实例上的变量都重置了，包括路由)

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