新版vue-router的hooks用法

雖然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, getCurrentInstance } from 'vue'

export default defineComponent((props, 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地址：

github.com/vuejs/vue-r…

它的示例都放在了playground這個文件夾下，期待大家研究明白後出一篇更加深刻的文章！