Eine kleine Anmerkung zum Problem des dynamischen Hinzufügens von Routen-----Das dynamische Hinzufügen von Routen führt zu Routing-Duplizierung

Eine kleine Anmerkung zum Problem des dynamischen Hinzufügens von Routen-----Das dynamische Hinzufügen von Routen führt zu Routing-Duplizierung

Problem: Beim dynamischen Hinzufügen von Routen führt der direkte Aufruf von route.addRoutes() zu einer Duplizierung der Route, da addRoutes nur für das Hinzufügen zuständig ist und die vorherigen Routen nicht löscht.
Lösung: Sie können in ‚router/index.js‘ wie folgt selbst eine benutzerdefinierte Methode erstellen:

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

Verwenden Sie diese Methode beim Aufrufen

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

Referenzartikel: https://www.cnblogs.com/fqh123/p/11571688.html