雖然Vue 3還沒有正式發布，但是熱愛新技術的我早已按捺不住自己的內心，開始嘗試在小專案中使用它了，
1.根據這篇《今日凌晨Vue3 beta版震撼發布，竟然公開支持腳手架專案！》我搭建了一個Vue 3的腳手架專案，用這種方式搭建的腳手架專案不僅僅只有vue是新版的，就連vue-router、vuex都是最新的，
2.光理論是不夠的，在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！
給大家截一下package.json的圖：
不過其實我并沒有去了解過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是當前組件背景關系)：
帶著猜想，我點開了$router：
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里面我一點開明明就看到了傳過來的引數啊:
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="261"></svg>)
估計可能是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')
})
復制代碼使用這種方式不但可以成功跳轉路由，也同樣可以獲取到路由傳過來的引數，這次再打包試了一下，果然就沒有之前的那個報錯了，
結語
1.估計以后的vue全家桶要開啟全民hooks的時代了，在翻看原始碼的同時我發現他們把一些示例都寫在了vue-router/playground檔案夾下了，在里面我發現了一些有趣的用法，
2.光理論是不夠的，在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！
本文的文字及圖片來源于網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,著作權歸原作者所有,如有問題請及時聯系我們以作處理
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/72089.html
標籤：JavaScript