建站
咨詢
售后
建站咨詢
新聞中心
你的可能已經(jīng)注意到，VUE 3版本的 Vue router (4.0) 與其之前的版本有一些 breaking change 更改。大部分的 Vue Router API 都沒有變化，而且遷移過程也非常直接。然而，一個(gè)非常不明顯但重要的變化常常被忽視，它可能導(dǎo)致難以調(diào)試的行為?，F(xiàn)在所有的導(dǎo)航都是異步的。
成都創(chuàng)新互聯(lián)公司專注于息烽企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站定制開發(fā)。息烽網(wǎng)站建設(shè)公司,為息烽等地區(qū)提供建站服務(wù)。全流程按需制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)
如果你想知道為什么 URL中的查詢參數(shù)在你的 ??setup??? 方法或 ??created?? 鉤子中無處可尋，但當(dāng)插入它們時(shí)，它們?nèi)匀怀霈F(xiàn)在模板中，不要離開， 我們來一探究竟。
現(xiàn)在所有的導(dǎo)航都是異步的
為了探索這一點(diǎn)，我們將使用一個(gè)已經(jīng)安裝了Vue router 4.0 的Vue 3 骨架應(yīng)用的 barebones 。你可以在這個(gè) repo 中跟著代碼走。
地址：https://github.com/Code-Pop/router-4-async。
項(xiàng)目下載下來后，運(yùn)行 ??npm iinstall??? 然后 運(yùn)行 ??npm run serve??，界面如下所示:
如果你現(xiàn)在在URL中添加一些查詢參數(shù)，如 ??http://localhost:8080/?param=1??，頁面會(huì)刷新，并將參數(shù)顯示在界面上。
讓我們看一下??App.vue???里面內(nèi)容，我們?cè)诮M件中添加了一個(gè) ??created??? 的鉤子。你會(huì)看到一個(gè)??console.log???行，它打印??$router.query??的內(nèi)容，就像我們?cè)谀０逯械哪菢印?/p>
Query:
{{ $route.query }}
我們繼續(xù)，像剛才一樣，使用和不使用查詢參數(shù)再次運(yùn)行這個(gè)實(shí)驗(yàn)。
你會(huì)注意到，無論添加多少個(gè)參數(shù)，或者重新加載多少次頁面，控制臺(tái)打印的??this.$route.query??都是空的。
接著，讓我們來解開這個(gè)問題。
正如一開始提到的，一個(gè)經(jīng)常被忽視的Vue Router 4的破壞性變化是，現(xiàn)在所有的導(dǎo)航都是異步的。正如文檔所建議的那樣，在處理 ??transition?? 時(shí)，這一點(diǎn)變得更加明顯，因?yàn)楫?dāng)Router從空到被數(shù)據(jù)填充時(shí)，它將觸發(fā)動(dòng)畫。
我們之所以能在瀏覽器中看到參數(shù)，但在控制臺(tái)中卻看不到，是因?yàn)閂ue的響應(yīng)式的，一旦??Router???的查詢對(duì)象可用，就立即更新HTML。記住，它現(xiàn)在是異步的。這個(gè)過程很快，以至于對(duì)我們來說，它似乎一直都在那里，當(dāng)在 ??setup??? 函數(shù)或生命周期鉤子（如??created()??）中處理查詢參數(shù)時(shí)，這可能真的會(huì)令人困惑。
修復(fù)問題
幸運(yùn)的是，這個(gè)問題的解決辦法是非常簡(jiǎn)單。我們只需到 ??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ù)并重新加載，就會(huì)在控制臺(tái)上看到我們的參數(shù)信息了。
新聞名稱：注意避坑，VueRouter4:路由參數(shù)在Created或Setup時(shí)不可用
新聞來源：http://www.dlmjj.cn/article/djgopgh.html
