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的值。