你的可能已經(jīng)注意到，VUE 3版本的 Vue router (4.0) 與其之前的版本有一些  breaking change 更改。大部分的 Vue Router API 都沒有變化，而且遷移過程也非常直接。然而，一個非常不明顯但重要的變化常常被忽視，它可能導致難以調(diào)試的行為?，F(xiàn)在所有的導航都是異步的。

如果你想知道為什么 URL中的查詢參數(shù)在你的 ??setup???  方法或 ??created?? 鉤子中無處可尋，但當插入它們時，它們?nèi)匀怀霈F(xiàn)在模板中，不要離開， 我們來一探究竟。

現(xiàn)在所有的導航都是異步的

為了探索這一點，我們將使用一個已經(jīng)安裝了Vue router 4.0 的Vue 3 骨架應用的 barebones 。你可以在這個 repo 中跟著代碼走。

地址：https://github.com/Code-Pop/router-4-async。

項目下載下來后，運行 ??npm iinstall??? 然后 運行 ??npm run serve??，界面如下所示:

如果你現(xiàn)在在URL中添加一些查詢參數(shù)，如 ??<a href="http://localhost:8080/?param=1" target="blank">http://localhost:8080/?param=1</a>??，頁面會刷新，并將參數(shù)顯示在界面上。

讓我們看一下??App.vue???里面內(nèi)容，我們在組件中添加了一個 ??created??? 的鉤子。你會看到一個??console.log???行，它打印??$router.query??的內(nèi)容，就像我們在模板中的那樣。

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
  Query: 
  <pre>{{ $route.query }}</pre>
</template>
<script>
export default {
  data: () => ({}),
  created () {
    console.log(this.$route.query)
  }
}
</script>

我們繼續(xù)，像剛才一樣，使用和不使用查詢參數(shù)再次運行這個實驗。

你會注意到，無論添加多少個參數(shù)，或者重新加載多少次頁面，控制臺打印的??this.$route.query??都是空的。

接著，讓我們來解開這個問題。

正如一開始提到的，一個經(jīng)常被忽視的Vue Router 4的破壞性變化是，現(xiàn)在所有的導航都是異步的。正如文檔所建議的那樣，在處理 ??transition?? 時，這一點變得更加明顯，因為當Router從空到被數(shù)據(jù)填充時，它將觸發(fā)動畫。

我們之所以能在瀏覽器中看到參數(shù)，但在控制臺中卻看不到，是因為Vue的響應式的，一旦??Router???的查詢對象可用，就立即更新HTML。記住，它現(xiàn)在是異步的。這個過程很快，以至于對我們來說，它似乎一直都在那里，當在 ??setup??? 函數(shù)或生命周期鉤子（如??created()??）中處理查詢參數(shù)時，這可能真的會令人困惑。

修復問題

幸運的是，這個問題的解決辦法是非常簡單。我們只需到 ??main.js?? 中，等待路由 ready 好后再掛載程序，如下所示:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
// Replace -> app.mount('#app')
router.isReady().then(() => {
    app.mount('#app')
})

現(xiàn)在，回到瀏覽器，添加參數(shù)并重新加載，就會在控制臺上看到我們的參數(shù)信息了。