如何使用vue-router的hooks

這篇文章主要講解了如何使用vue-router的hooks，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

紅橋ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書(shū)合作）期待與您的合作！

雖然Vue 3還沒(méi)有正式發(fā)布，但是熱愛(ài)新技術(shù)的我早已按捺不住自己的內(nèi)心，開(kāi)始嘗試在小項(xiàng)目中使用它了。

根據(jù)這篇《今日凌晨Vue3 beta版震撼發(fā)布，竟然公開(kāi)支持腳手架項(xiàng)目！》我搭建了一個(gè)Vue 3的腳手架項(xiàng)目，用這種方式搭建的腳手架項(xiàng)目不僅僅只有vue是新版的，就連vue-router、vuex都是最新的。

給大家截一下package.json的圖：

可以看到vue-router和vuex都已經(jīng)開(kāi)啟4.0時(shí)代啦！

不過(guò)其實(shí)我并沒(méi)有去了解過(guò)vue-router 4.0的新用法什么的，因?yàn)槲矣X(jué)得它不像vue 3.0都已經(jīng)進(jìn)行到beta的版本不會(huì)有特別大的變動(dòng)。

而vue-router 4.0還是alpha的階段，所以我認(rèn)為現(xiàn)在去學(xué)習(xí)它有些為時(shí)尚早。但卻就是它！差點(diǎn)釀成了一場(chǎng)慘劇。

舊版vue + vue-router的使用方式

假如你在路由里面定義了一個(gè)動(dòng)態(tài)參數(shù)通常都會(huì)這么寫(xiě)：

{
 path: '/:id'
}

然后用編程式導(dǎo)航的時(shí)候通常會(huì)這樣去寫(xiě):

this.$router.push('/123')

在組件中是這樣獲取這個(gè)參數(shù)的：

this.$route.params.id

我以為的新版vue + vue-router的使用方式

由于vue 3.0的Composition API中沒(méi)有this了，所以我想到了通過(guò)獲取組件實(shí)例的方式來(lái)獲取$route：

import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent((props, context) => {
 const { ctx } = getCurrentInstance()
 
 console.log(ctx.$route)
})

沒(méi)想到打印出來(lái)的居然是undefined！
這是咋回事呢？
于是我又打印了一遍ctx(ctx是當(dāng)前組件上下文)：

沒(méi)有$的那些字段是我在組件中自己定義的變量，帶$的這些就是vue內(nèi)置的了，找了半天發(fā)現(xiàn)沒(méi)有$route了，只剩下了一個(gè)$router，估計(jì)vue-router 4.0把當(dāng)前路由信息都轉(zhuǎn)移到$router里面去了。

帶著猜想，我點(diǎn)開(kāi)了$router：

currentRoute! 看名字的話感覺(jué)應(yīng)該就是它了！于是乎我：

import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent((props, context) => {
 const { ctx } = getCurrentInstance()
 
 console.log(ctx.$router.currentRoute.value.params.id)
})

果然獲取到了！好開(kāi)心！

實(shí)際的新版vue + vue-router用法

在接下來(lái)的過(guò)程中我用ctx.$router代替了原來(lái)的this.$router、用ctx.$router.currentRoute.value代替了原先的this.$route。

盡管在接下來(lái)的進(jìn)度中并沒(méi)有出現(xiàn)任何的bug，程序一直都是按照我所設(shè)想的那樣去運(yùn)行的。

但在項(xiàng)目打包后卻出現(xiàn)了意想不到的bug：在跳轉(zhuǎn)路由的時(shí)候報(bào)了一個(gè)在undefined上面沒(méi)有push的錯(cuò)誤。

奇了怪了，在開(kāi)發(fā)階段程序都沒(méi)有任何的報(bào)錯(cuò)怎么一打包就不行了呢？依靠多年的開(kāi)發(fā)經(jīng)驗(yàn)，我很快就定位到了是vue-router的錯(cuò)誤。

難道這樣寫(xiě)是錯(cuò)的嗎？可是我打印了ctx，它里面明明有一個(gè)$router、$router里面明明就有currentRoute、currentRoute里面明明就有一個(gè)value、value里面明明就有params、params里面我一點(diǎn)開(kāi)明明就看到了傳過(guò)來(lái)的參數(shù)啊:

估計(jì)可能是vue-router的bug，果然alpha階段的產(chǎn)物不靠譜，我開(kāi)始后悔使用新版的vue腳手架項(xiàng)目了。

vue-router里的hooks

不過(guò)這時(shí)我突然靈光一現(xiàn)，vue 3不是受到了react hooks的啟發(fā)才產(chǎn)生了Composition API的嗎？

那么估計(jì)vue-router肯定也會(huì)受到react-router的啟發(fā)了！

還好我學(xué)過(guò)react，果然技多不壓身?。」烙?jì)里面肯定是有一個(gè)useXxx，就像這樣：

import 
{ 
useXxx 
}
 from 'vue-router'

那么應(yīng)該是use什么呢？按理來(lái)說(shuō)應(yīng)該會(huì)盡量的和以前的API保持一定的聯(lián)系，我猜應(yīng)該是useRoute和useRouter吧！

為了驗(yàn)證我的想法，我打開(kāi)了node_modules找到了vue-router的源碼：

果不其然，在第2454和第2455行我發(fā)現(xiàn)它導(dǎo)出了useRoute和useRouter，那么就是它了：

import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent(_ => {
 const route = useRoute()
 const router = useRouter()

 console.log(route.params.id)
 router.push('/xxx/xxx')
})

使用這種方式不但可以成功跳轉(zhuǎn)路由，也同樣可以獲取到路由傳過(guò)來(lái)的參數(shù)，這次再打包試了一下，果然就沒(méi)有之前的那個(gè)報(bào)錯(cuò)了。

看完上述內(nèi)容，是不是對(duì)如何使用vue-router的hooks有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

標(biāo)題名稱：如何使用vue-router的hooks
URL地址：http://bm7419.com/article12/iiphgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化、全網(wǎng)營(yíng)銷推廣、自適應(yīng)網(wǎng)站、小程序開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)