雖然Vue 3還沒有正式釋出，但是熱愛新技術的我早已按捺不住自己的內心，開始嘗試在小專案中使用它了。

根據這篇《今日凌晨Vue3 beta版震撼釋出，竟然公開支援腳手架專案！》我搭建了一個Vue 3的腳手架專案，用這種方式搭建的腳手架專案不僅僅只有vue是新版的，就連vue-router、vuex都是最新的。

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

可以看到vue-router和vuex都已經開啟4.0時代啦！

不過其實我並沒有去了解過vue-router 4.0的新用法什麼的，因為我覺得它不像vue 3.0都已經進行到beta的版本不會有特別大的變動。

而vue-router 4.0還是alpha的階段，所以我認為現在去學習它有些為時尚早。但卻就是它！差點釀成了一場慘劇。

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

假如你在路由裡面定義了一個動態引數通常都會這麼寫：

{
 path: '/:id'
}

然後用程式設計式導航的時候通常會這樣去寫:

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

在元件中是這樣獲取這個引數的：

this.$route.params.id

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

由於vue 3.0的Composition API中沒有this了，所以我想到了通過獲取元件例項的方式來獲取$route：

import { defineComponent,getCurrentInstance } from 'vue'

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

沒想到打印出來的居然是undefined！
這是咋回事呢？
於是我又列印了一遍ctx(ctx是當前元件上下文)：

沒有$的那些欄位是我在元件中自己定義的變數，帶$的這些就是vue內建的了，找了半天發現沒有$route了，只剩下了一個$router，估計vue-router 4.0把當前路由資訊都轉移到$router裡面去了。

帶著猜想，我點開了$router：

currentRoute! 看名字的話感覺應該就是它了！於是乎我：

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

果然獲取到了！好開心！

實際的新版vue + vue-router用法

在接下來的過程中我用ctx.$router代替了原來的this.$router、用ctx.$router.currentRoute.value代替了原先的this.$route。

儘管在接下來的進度中並沒有出現任何的bug，程式一直都是按照我所設想的那樣去執行的。

但在專案打包後卻出現了意想不到的bug：在跳轉路由的時候報了一個在undefined上面沒有push的錯誤。

奇了怪了，在開發階段程式都沒有任何的報錯怎麼一打包就不行了呢？依靠多年的開發經驗，我很快就定位到了是vue-router的錯誤。

難道這樣寫是錯的嗎？可是我列印了ctx，它裡面明明有一個$router、$router裡面明明就有currentRoute、currentRoute裡面明明就有一個value、value裡面明明就有params、params裡面我一點開明明就看到了傳過來的引數啊:

估計可能是vue-router的bug，果然alpha階段的產物不靠譜，我開始後悔使用新版的vue腳手架專案了。

vue-router裡的hooks

不過這時我突然靈光一現，vue 3不是受到了react hooks的啟發才產生了Composition API的嗎？

那麼估計vue-router肯定也會受到react-router的啟發了！

還好我學過react，果然技多不壓身啊！估計裡面肯定是有一個useXxx，就像這樣：

import 
{ 
useXxx 
}
 from 'vue-router'

那麼應該是use什麼呢？按理來說應該會盡量的和以前的API保持一定的聯絡，我猜應該是useRoute和useRouter吧！

為了驗證我的想法，我打開了node_modules找到了vue-router的原始碼：

果不其然，在第2454和第2455行我發現它匯出了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')
})

使用這種方式不但可以成功跳轉路由，也同樣可以獲取到路由傳過來的引數，這次再打包試了一下，果然就沒有之前的那個報錯了。

結語

估計以後的vue全家桶要開啟全民hooks的時代了，在翻看原始碼的同時我發現他們把一些示例都寫在了vue-router/playground資料夾下了，在裡面我發現了一些有趣的用法。

如果有時間的話我會仔細研究一下然後出一篇更加深入的文章給大家，當然如果已經有小夥伴等不及我出新文章的話可以直接進入vue-router-next的github地址：

https://github.com/vuejs/vue-router-next

它的示例都放在了playground這個資料夾下，期待你們研究明白後出一篇更加深入的文章！

到此這篇關於vue-router的hooks用法的文章就介紹到這了,更多相關vue-router hooks用法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！