vue-router如何更新路由信息

背景

在 App.vue 文件中通过 addRoutes 动态添加路由。访问路由 /login，我发现 this.$route 返回的数据中，meta.a 却是 undefined。

如果一秒后再次访问 this.$route，meta.a 为 1。这是为何？

create() {
  const routes = [{
    path: "login",
    name: "login",
    component: () => import('./login.vue),
    meta: {
      a: 1
    }
  }]
  router.addRoutes(routes)
  console.log(this.$route) // 位置1
  setTimeout(() => console.log(this.$route), 1000) // 位置2
}

两次导航（transitionTo）

第一次 transitionTo

vue-router 初始化过程中，执行下面两个步骤：

步骤A) 根据传入的路由数组（此时为[]）调用 createRouteMap 生成路由图谱，并主动触发一次 transitionTo，transitionTo 在路由图谱中查找是否有 /login

步骤B) 如果没有，则会生成一条记录，然后更新路由，显然，这条新路由的meta一定为空。

第二次 transitionTo

当执行 addRoutes 时，也会执行步骤A)，但此时，transitionTo 就可以在路由图谱中找到 /login 这条数据，它的 meta.a 为 1。但为什么在 位置1 处，访问 this.$route，meta.a 仍然是 undefined ?

异步or同步

每次 transitionTo 都会生成一组队列，如下：

var queue = [].concat(
  // in-component leave guards
  extractLeaveGuards(deactivated),
  // global before hooks
  this.router.beforeHooks,
  // in-component update hooks
  extractUpdateHooks(updated),
  // in-config enter guards
  activated.map(function (m) { return m.beforeEnter; }),
  // async components
  resolveAsyncComponents(activated)
);

然后调用 runQueue 按顺序执行这组队列，当队列执行完毕后，才会更新当前路由信息current。

而是否同步更新路由，取决于路由对应的组件是否同步，即根据 resolveAsyncComponents 的解析结果判断。

在本例中，我们使用component: () => import('./login.vue)，解析后发现它是一个异步组件，所以，路由信息更新也是异步的。

如果把例子中的login组件改为同步引用，像这样:

import login from './login'
...
component: login
...

那么无论在 位置1 还是 位置2，都能得到同样的路由信息。

p.s. 访问 this.$route，就是获取当前路由信息current的值。