vue动态添加路由，跳转页面时，页面报错路由重复： [vue-router] Duplicate named routes definition: {

之前用了一个vue-element-admin做了一个小项目，里面用到了动态添加路由，动态展示侧边栏，

当我切换页面时，控制台总是警告提示路由重复，连续跳转几次页面后，控制台就被这些警告占满了，

vue动态添加路由，跳转页面时，页面报错路由重复：

 

于是处理一下

原因addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除原有的其它路由！

我们先看一下原来代码

路由拦截器中的代码：

permission.js:

router.beforeEach((to, from, next) => {

  NProgress.start()
  let token = getToken();
  let hasToken = token != 'undefined' && token != undefined && token !=null && token != '';

  if (hasToken) {
    // 1.有token
    if (to.path == loginRoute) {
      // 1.1 如果是去登录页，有token视为已登录，直接跳到首页
      next({ path: '/' })
      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
    } else {
      // 1.2 如果不是去登录页，判断是否有访问权限
      if(store.getters.visitor){
        // 1.2.1 若该标记为true,是因为GetUserInfo返回结果发现用户信息中roles或perms为空数组，即未配置任何角色或权限，
        // 所以视为游客visitor给放行，放行后游客只能看到公共可以访问的菜单(即src/router/index.js中没有配置perm属性的路由)。
        next()
      }else if (!store.getters.perms || store.getters.perms.length === 0) {
        // 1.2.2 检查发现不是游客且未加载用户权限信息，应该调用接口加载用户权限信息
        // 用户刷新页面会导致vuex状态清空，或者用户首次登录，vuex中还没有权限信息。都要调用后台接口获得用户信息
        store.dispatch('GetUserInfo').then(res => {
          const perms = res.data.perms // note: roles must be a array! such as: [{name:'菜单1',val:'menu:1'}]
          store.dispatch('GenerateRoutes', { perms }).then(() => { // 根据roles权限生成可访问的路由表
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })
        }).catch((err) => {
          store.dispatch('FedLogOut').then(() => {
            Message.error(err || '获取用户信息失败，请重试')
            next({ path: '/' })
          })
        })
      } else {
        // 1.2.3 如果vuex种有权限信息，匹配权限信息，匹配ok则放行
        if (hasPermission(store.getters.perms, to.meta.perm)) {
          next()
        } else {
          next({ path: '/401', replace: true, query: { noGoBack: true }})
        }
      }
    }
  } else {
    // 2.没有token
    // 如果要访问的路由在白名单中，直接进入；否则，重定向到登录页面
    whiteList.has(to.path) ? next() : next(loginRoute);
    NProgress.done();
  }
})

 

 

上面 调用的addRoutes()方法是router自带的原生方法，是动态添加路由的，它并没有删除之前路由中原有的路由！！

我们需要在动态添加路由时，清空一下之前的路由，就可以防止报这个错误

我们需要添加一个自定义方法，来清空之前的路由，因为这个permission.js中用的router是从router.js中引用进来的，所以要在router.js中增加这个自定义方法：

router.js中增加如下方法：

Router.selfaddRoutes = function (params){
  Router.matcher = new Router().matcher;
  Router.addRoutes(params)
}

因为router.js最后导出的是router对象。所以我们只需要在这个router对象里加上这个方法即可