注意避坑，Vue Router 4: 路由引數在 created/setup 時不可用

前端小智發表於2022-06-13
Vue路由

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

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

如果你想知道為什麼 URL中的查詢引數在你的 setup 方法或 created 鉤子中無處可尋，但當插入它們時，它們仍然出現在模板中，不要離開， 我們來一探究竟。

現在所有的導航都是非同步的

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

地址：https://github.com/Code-Pop/r...

專案下載下來後，執行 npm iinstall 然後 執行 npm run serve，介面如下所示:

image.png

如果你現在在URL中新增一些查詢引數，如 <a href="http://localhost:8080/?param=1" target="blank">http://localhost:8080/?param=1</a>，頁面會重新整理，並將引數顯示在介面上。

image.png

讓我們看一下App.vue裡面內容，我們在元件中新增了一個 created 的鉤子。你會看到一個console.log行，它列印$router.query的內容，就像我們在模板中的那樣。

<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>

我們繼續，像剛才一樣，使用和不使用查詢引數再次執行這個實驗。

你會注意到，無論新增多少個引數，或者重新載入多少次頁面，控制檯列印的this.$route.query都是空的。

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

正如一開始提到的，一個經常被忽視的Vue Router 4的破壞性變化是，現在所有的導航都是非同步的。正如文件所建議的那樣，在處理 transition 時，這一點變得更加明顯，因為當Router從空到被資料填充時，它將觸發動畫。

我們之所以能在瀏覽器中看到引數，但在控制檯中卻看不到，是因為Vue的響應式的，一旦Router的查詢物件可用，就立即更新HTML。記住，它現在是非同步的。這個過程很快，以至於對我們來說，它似乎一直都在那裡，當在 setup 函式或生命週期鉤子（如created()）中處理查詢引數時，這可能真的會令人困惑。

修復問題

幸運的是，這個問題的解決辦法是非常簡單。我們只需到 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')
})

現在，回到瀏覽器，新增引數並重新載入，就會在控制檯上看到我們的引數資訊了。

作者：Marina Mosti 譯者：前端小智 來源：medium

原文：
https://www.vmastery.com/blog...

交流

文章每週持續更新，可以微信搜尋「 大遷世界 」第一時間閱讀和催更（比部落格早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了很多我的文件，歡迎Star和完善，大家面試可以參照考點複習，另外關注公眾號，後臺回覆福利，即可看到福利，你懂的。

相關文章