Vue dynamically adds routes, and when jumping to the page, the page reports an error route duplication: [vue-router] Duplicate named routes definition: {

I used a vue-element-admin to make a small project before, which used dynamic addition of routes and dynamic display of sidebars.

When I switch pages, the console always warns that the route is repeated. After several consecutive page jumps, the console is full of these warnings.

Vue dynamically adds routes. When jumping to the page, the page reports an error and repeats the route:

 

So deal with it

The reason is that the addRoutes method only injects new routes for you, but does not remove other original routes for you!

Let's look at the original code first

Code in route interceptor:

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

 

 

The addRoutes() method called above is a native method of the router, which dynamically adds routes. It does not delete the original routes in the previous routes! !

We need to clear the previous routes when dynamically adding routes to prevent this error

We need to add a custom method to clear the previous route, because the router used in this permission.js is referenced from router.js, so we need to add this custom method in router.js:

Add the following method to router.js:

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

Because router.js finally exports the router object. So we just need to add this method to the router object