vue-router的hooks用法详解


Posted in Javascript onJune 08, 2020

虽然Vue 3还没有正式发布,但是热爱新技术的我早已按捺不住自己的内心,开始尝试在小项目中使用它了。

根据这篇《今日凌晨Vue3 beta版震撼发布,竟然公开支持脚手架项目!》我搭建了一个Vue 3的脚手架项目,用这种方式搭建的脚手架项目不仅仅只有vue是新版的,就连vue-router、vuex都是最新的。

给大家截一下package.json的图:

vue-router的hooks用法详解

可以看到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-router的hooks用法详解

没有$的那些字段是我在组件中自己定义的变量,带$的这些就是vue内置的了,找了半天发现没有$route了,只剩下了一个$router,估计vue-router 4.0把当前路由信息都转移到$router里面去了。

带着猜想,我点开了$router:

vue-router的hooks用法详解

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的hooks用法详解

估计可能是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的源码:

vue-router的hooks用法详解

果不其然,在第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用法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript背投广告代码的完善
Apr 08 Javascript
jQuery 改变CSS样式基础代码
Feb 11 Javascript
js图片自动切换效果处理代码
May 07 Javascript
javascript使用location.search的示例
Nov 05 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 #Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 #Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 #Javascript
vue路由权限校验功能的实现代码
Jun 07 #Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 #Javascript
JS原型对象操作实例分析
Jun 06 #Javascript
JS中的继承操作实例总结
Jun 06 #Javascript
You might like
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
JS中的phototype详解
2017/02/04 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
Python如何实现线程间通信
2020/07/30 Python
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
全球虚拟主机商:HostGator
2017/02/06 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
党员公开承诺事项
2014/03/25 职场文书
党员服务承诺书
2014/05/28 职场文书
环保口号大全
2014/06/12 职场文书
小学数学课题方案
2014/06/15 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书