关于动态添加路由问题小记-----动态添加路由导致路由重复问题

关于动态添加路由问题小记-----动态添加路由导致路由重复问题

问题：动态添加路由的时候，直接调用route.addRoutes()会出现路由重复问题，原因是addRoutes只负责添加，并不会清除以前的路由。
解决方法：可以在 ‘router/index.js’ 自己创建一个自定义方法，如下：

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

在调用的时候使用这个方法即可

if (hasToken) {
    
    
    if (to.path === '/login') {
    
    
      // 如果已登录，则重定向到主页
      next({
    
     path: '/' })
      NProgress.done()
    } else {
    
    
      if (to.name != null) {
    
    
        next() // 放行
      } else {
    
    
        // 将路由添加到 store 中，用来标记已添加动态路由
        const accessRoutes = await store.dispatch('permission/generateRoutes')
        // 如果 selfaddRoutes 并未完成，路由守卫会一层一层的执行执行，直到 selfaddRoutes 完成，找到对应的路由
        router.selfaddRoutes(accessRoutes)
        next({
    
     ...to, replace: true })
      }
      NProgress.done()
    }
  } else {
    
    
    /* 未登录*/

    if (whiteList.indexOf(to.path) !== -1) {
    
    
      // 在空闲登录白名单中，直接进入
      next()
    } else {
    
    
      // 其他没有访问权限的页面将被重定向到登录页面
      next(`/login?redirect=${
      
      to.path}`)
      NProgress.done()
    }
  }

参考文章：https://www.cnblogs.com/fqh123/p/11571688.html