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 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 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
php验证手机号码
2015/11/11 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
详解jQuery事件
2017/01/13 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
python利用lxml读写xml格式的文件
2017/08/10 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
python实现飞机大战微信小游戏
2020/03/21 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
最新会计专业求职信范文
2014/01/28 职场文书
党员政治学习材料
2014/05/14 职场文书
项目负责人任命书
2014/06/04 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书