最新vue-router的hooks用法你会吗？本文详解

女爷i 2023-02-16 06:47 16阅读 0赞

虽然Vue 3还没有正式发布，但是热爱新技术的我早已按捺不住自己的内心，开始尝试在小项目中使用它了。  
1.根据这篇《今日凌晨Vue3 beta版震撼发布，竟然公开支持脚手架项目！》我搭建了一个Vue 3的脚手架项目，用这种方式搭建的脚手架项目不仅仅只有vue是新版的，就连vue-router、vuex都是最新的。  
2.光理论是不够的。在此赠送2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程，想学的可进裙 519293536 免费获取，小白勿进哦！

给大家截一下package.json的图：  
![在这里插入图片描述][20200609095838749.png]

可以看到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. r o u t e . p a r a m s . i d 复 制 代 码 我 以 为 的 新 版 v u e + v u e − r o u t e r 的 使 用 方 式 由 于 v u e 3.0 的 C o m p o s i t i o n A P I 中 没 有 t h i s 了 ， 所 以 我 想 到 了 通 过 获 取 组 件 实 例 的 方 式 来 获 取 route.params.id 复制代码 我以为的新版vue + vue-router的使用方式 由于vue 3.0的Composition API中没有this了，所以我想到了通过获取组件实例的方式来获取 route.params.id复制代码我以为的新版vue\+vue−router的使用方式由于vue3.0的CompositionAPI中没有this了，所以我想到了通过获取组件实例的方式来获取route：

import \{ defineComponent, getCurrentInstance \} from ‘vue’

export default defineComponent((props, context) => \{  
const \{ ctx \} = getCurrentInstance()

console.log(ctx.$route)

\})  
复制代码  
没想到打印出来的居然是undefined！ 这是咋回事呢？ 于是我又打印了一遍ctx(ctx是当前组件上下文)：

没有 的 那 些 字 段 是 我 在 组 件 中 自 己 定 义 的 变 量 ， 带 的那些字段是我在组件中自己定义的变量，带 的那些字段是我在组件中自己定义的变量，带的这些就是vue内置的了，找了半天发现没有 r o u t e 了 ， 只 剩 下 了 一 个 route了，只剩下了一个 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. r o u t e r 代 替 了 原 来 的 t h i s . router代替了原来的this. router代替了原来的this.router、用ctx. r o u t e r . c u r r e n t R o u t e . v a l u e 代 替 了 原 先 的 t h i s . router.currentRoute.value代替了原先的this. router.currentRoute.value代替了原先的this.route。

尽管在接下来的进度中并没有出现任何的bug，程序一直都是按照我所设想的那样去运行的。

但在项目打包后却出现了意想不到的bug：在跳转路由的时候报了一个在undefined上面没有push的错误。

奇了怪了，在开发阶段程序都没有任何的报错怎么一打包就不行了呢？依靠多年的开发经验，我很快就定位到了是vue-router的错误。

难道这样写是错的吗？可是我打印了ctx，它里面明明有一个 r o u t e r 、 router、 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的源码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1FRMjM1MjEwODA4Mw_size_16_color_FFFFFF_t_70]  
果不其然，在第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 免费获取，小白勿进哦！  
本文的文字及图片来源于网络加上自己的想法,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理

[20200609095838749.png]: https://img-blog.csdnimg.cn/20200609095838749.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1FRMjM1MjEwODA4Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200609095933924.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1FRMjM1MjEwODA4Mw==,size_16,color_FFFFFF,t_70