vue router 采坑儿记，希望能帮助到你：

1. 问题：

• 需求：前端路由表，需网站首次加载后，从后端动态获取并刷新（本项目中没有登录）
• 开始思路（坑儿）：

  /**
  * vue router 动态路由实现 使用 router.addRouter() 方法
  * 1. 因为本项目不存在登录流程，所以网站初始没有任何路由，也不能在登陆成功后再 addRouter
  * 2. 解决思路：只能在 main.js vue根实例 created(mounted) 周期中获取路由表并 addRouter
  * 3. 存在问题：在跳转路由的时候，新页面为空白页。在路由前置守卫（beforeEach）中抓取 to 参数，
  *            发现 matched 为空。
  */
  created() {
    // getRoutes(): 向后台请求数据
    // cleanRoutes(): 生成合法路由配置数组（指定component追加404等路由）
    // setRouter(): 封装的 addRouter 方法，主要解决动态菜单问题
    getRoutes().then(res => {
      setRouter(cleanRoutes(res))
      store.dispatch('manager/setWhiteDomains', crawlWhite(res))
    })
  }

  /**
   * 动态新增路由
   * @param {Array} routes 符合路由规范的数组
   */
  export function setRouter(routes) {
    /**
     * 这里保存一份路由副本是为了动态生成菜单用
     * 原因：addRouter(),路由表只存在内存中，$router.options.router 是没有动态增加的
     *      路由的，因为 vue router 主要是解决静态路由，路由表示构造函数初始化的
     */
    store.dispatch('manager/setRoutes', routes)
    // 动态添加路由表
    router.addRoutes(routes)
  }

   

2. 解决办法

• 既然前置守卫中拿不到matched，就把路由初始化 addRouter（）放到前置守卫中去做

• router.beforeEach(async(to, from, next) => {
    // 动态路由加载
    if (to.matched.length === 0) {
      getRoutes().then(res => {
        setRouter(cleanRoutes(res))
        next({ ...to, replace: true })
      })
    } else {
      next()
    }
  })