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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
D3.js实现拓扑图的示例代码
Jun 30 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
uniapp实现横向滚动选择日期
Oct 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
JS实现图片切换效果
2018/11/17 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
python统计cpu利用率的方法
2015/06/02 Python
Python网络爬虫实例讲解
2016/04/28 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
化学实验员岗位职责
2013/12/28 职场文书
关键在于落实心得体会
2014/09/03 职场文书
婚前协议书范本两则
2014/10/16 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
离婚协议书格式
2015/01/26 职场文书
教师聘用意向书
2015/05/11 职场文书
php中pcntl_fork详解
2021/04/01 PHP
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
MySQL慢查询优化解决问题
2022/03/17 MySQL
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers