注意避坑,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和完善,大家面試可以參照考點複習,另外關注公眾號,後臺回覆福利,即可看到福利,你懂的。

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

相關文章