Vue  Router动态路由经典问题next({ ...to, replace: true })解决方案

// 问题代码
router.addRoutes(dynamicRoutes) // 动态添加路由
next() // 立即跳转，但路由可能还没添加完成！

router.beforeEach((to, from, next) => {
  if (getToken()) {
    if (store.getters.roles.length === 0) {
      // 首次访问，需要动态添加路由
      store.dispatch('GenerateRoutes').then(accessRoutes => {
        router.addRoutes(accessRoutes)
        
        // 关键解决方案
        next({ ...to, replace: true })
      })
    } else {
      next() // 路由已存在，直接放行
    }
  }
})

// 用户访问 /system/user?tab=info#section1
// to 对象包含：
{
  path: '/system/user',
  fullPath: '/system/user?tab=info#section1',
  hash: '#section1',
  query: { tab: 'info' },
  params: {},
  name: 'User',
  meta: { title: '用户管理', icon: 'user' }
}

// ...to 展开后相当于：
next({
  path: '/system/user',
  fullPath: '/system/user?tab=info#section1',
  hash: '#section1',
  query: { tab: 'info' },
  params: {},
  name: 'User',
  meta: { title: '用户管理', icon: 'user' },
  replace: true // 额外添加
})

if (store.getters.roles.length === 0) {
  // 用户权限信息不存在，需要获取
  store.dispatch('GetInfo').then(() => {
    // 获取用户信息成功，生成动态路由
    store.dispatch('GenerateRoutes').then(accessRoutes => {
      router.addRoutes(accessRoutes) // 异步添加路由
      next({ ...to, replace: true }) // 重新导航，给路由添加时间
    })
  })
}