解决 Vue addRoutes 不生效问题

在 Vue 动态添加路由时，如果使用了 addRoutes 方法，可能会遇到路由不生效的问题。这种情况一般出现在使用了路由懒加载的情况下，因为路由懒加载会生成异步组件，而 addRoutes 只针对同步组件进行路由添加。下面是解决这个问题的步骤。

步骤一：重置路由表

在动态路由添加前，需要先重置 router 的所有路由，以便能够正确的将新增路由添加到路由表中。重置路由表的方法如下：

const router = new VueRouter({
  routes: []
})

// 重置路由表
router.matcher = new VueRouter({
  routes: []
}).matcher

步骤二：获取异步组件并生成路由对象

在 routes 路由配置中只能使用同步组件，因此要将异步组件转换为同步组件，并将其转换为路由对象，最终将其添加到路由表中，示例如下：

// 获取异步组件并生成路由对象
function resolveRoutes(routeConfig) {
  return routeConfig.map(route => {
    if (route.component) {
      route.component = resolve => {
        require([`${route.component}.vue`], resolve)
      }
    }
    if (route.children && route.children.length) {
      route.children = resolveRoutes(route.children)
    }
    return route
  })
}

步骤三：使用 addRoutes 方法添加路由

把新生成的路由对象使用 addRoutes 方法添加到 router 中：

// 动态添加路由
router.addRoutes(routes)

示例一：动态添加全局路由

下面是一个示例，动态添加了几个全局路由，这些路由可以在任何页面中访问。

function getGlobalRoutes() {
  let routes = []
  if (store.getters.user.role === 'admin') {
    routes = [
      {
        name: 'userManagement',
        path: '/user-management',
        component: 'views/user-management'
      },
      {
        name: 'setting',
        path: '/setting',
        component: 'views/setting'
      }
    ]
  }
  return routes
}

const globalRoutes = getGlobalRoutes()

// 重置路由表
router.matcher = new VueRouter({
  routes: []
}).matcher

// 动态添加全局路由
router.addRoutes(globalRoutes)

// 在路由切换前验证权限
router.beforeEach((to, from, next) => {
  if (to.meta.auth && !store.getters.isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

示例二：动态添加嵌套路由

下面是另一个示例，动态添加了一个嵌套路由，这个路由是根据后端返回的数据动态生成的。

function getNestedRoutes() {
  return axios.get('/roles.json').then(res => {
    return [{
      path: '/role-management',
      component: 'views/role-management',
      children: res.data.roles.map(role => {
        return {
          name: role.name,
          path: `/${role.name}`,
          component: 'views/role-details',
          meta: { auth: true }
        }
      })
    }]
    })
}

// 获取异步组件并生成路由对象
function resolveRoutes(routeConfig) {
  return routeConfig.map(route => {
    if (route.component) {
      route.component = resolve => {
        require([`${route.component}.vue`], resolve)
      }
    }
    if (route.children && route.children.length) {
      route.children = resolveRoutes(route.children)
    }
    return route
  })
}

// 动态添加嵌套路由
getNestedRoutes().then(routes => {
  const resolvedRoutes = resolveRoutes(routes)
  router.addRoutes(resolvedRoutes)
})

以上就是解决 Vue addRoutes 不生效的完整攻略，对于动态路由相关的问题，我们需要对路由的特性和底层实现有深入的理解，才能更好地解决问题。