vue组件独享守卫钩子函数参数详解(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)...
首先在demo下面的components下面新建一个test.vue组件
test组件代码
<template><div class="test_box"><p @click="go">测试组件内部守卫的作用,点击跳到HelloWorld</p></div> </template> <script> export default {data() {return {}},methods: {go() {this.$router.push({ name: 'HelloWorld' })}},beforeRouteEnter(to, from, next) {console.log(this, 'beforeRouteEnter'); // undefinedconsole.log(to, '组件独享守卫beforeRouteEnter第一个参数');console.log(from, '组件独享守卫beforeRouteEnter第二个参数');console.log(next, '组件独享守卫beforeRouteEnter第三个参数');next(vm => {//因为当钩子执行前,组件实例还没被创建// vm 就是当前组件的实例相当于上面的 this,所以在 next 方法里你就可以把 vm 当 this 来用了。console.log(vm);//当前组件的实例});},beforeRouteUpdate(to, from, next) {//在当前路由改变,但是该组件被复用时调用//对于一个带有动态参数的路径 /good/:id,在 /good/1 和 /good/2 之间跳转的时候,// 由于会渲染同样的good组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`console.log(this, 'beforeRouteUpdate'); //当前组件实例console.log(to, '组件独享守卫beforeRouteUpdate第一个参数');console.log(from, '组件独享守beforeRouteUpdate卫第二个参数');console.log(next, '组件独享守beforeRouteUpdate卫第三个参数');next();},beforeRouteLeave(to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`console.log(this, 'beforeRouteLeave'); //当前组件实例console.log(to, '组件独享守卫beforeRouteLeave第一个参数');console.log(from, '组件独享守卫beforeRouteLeave第二个参数');console.log(next, '组件独享守卫beforeRouteLeave第三个参数');next();} }</script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style>
helloWord组件代码
<template><div class="sider_box"><p @click="go">第一个页面</p><p @click="goTest">触发让它跳到test页面检查组件守卫功能</p></div> </template> <script> export default {data() {return {}},methods: {go(){this.$router.push({name:'navMenu'})},goTest(){this.$router.push({name:'test'})}} }</script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style>
先从helloword跳到test可以看到控制台打印
再从test跳到helloword可以看到打印如下:
转载于:https://www.cnblogs.com/gluncle/p/10517424.html
vue组件独享守卫钩子函数参数详解(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)...相关推荐
- Vue实例生命周期函数(钩子函数)详解
一.钩子函数 在了解vue生命周期函数之前,我们先看看啥叫"钩子函数"?百度一下是这样一段官方解释:"钩子函数是Windows消息处理机制的一部分,通过设置"钩 ...
- ioctl 函数 参数 详解
2019独角兽企业重金招聘Python工程师标准>>> ioctl 函数 参数 详解 2009-04-24 11:55 ioctl函数 本函数影响由fd参数引用的一个打开的文件. # ...
- PHP date函数参数详解
PHP date函数参数详解 作者: 字体:[增加 减小] 类型:转载 time()在PHP中是得到一个数字,这个数字表示从1970-01-01到现在共走了多少秒,很奇怪吧 不过这样方便计算, 要找 ...
- java调用js匿名函数参数,js匿名函数作为函数参数详解
由衷的感叹,js真是烦. 学到现在,渐渐理解了什么是:语言都是通用的,没有好不好,只有擅长不擅长. 继承,多态,甚至指针,c能实现,c++,java有,javascript(和java是雷锋和雷峰塔的 ...
- matlab melbankm,Matlab v_melbankm函数参数详解(英文附例)
Matlab v_melbankm函数参数详解(英文附例) 笔者使用的是R2019的matlab,下载了voicebox安装至matlab路径下即可使用.下载voicebox请参看此博客 需要注意的是 ...
- 定义一个没有参数的函数、输出python3次_Python函数参数详解,三天让你掌握python,不再是小白
原标题:Python函数参数详解,三天让你掌握python,不再是小白 引言 随着程序功能的增多,代码量随之增大,此时仍不加区分地把所有功能的实现代码放到一起,将会使得程序的组织结构不清晰,可读性变差 ...
- Matlab mfcc函数参数详解(英文附例)
Matlab mfcc函数参数详解 其实可以直接打开源代码看哈. %MFCC Extract the mfcc, log-energy, delta, and delta-delta of audio ...
- python传入参数加星号_Python 带星号(* 或 **)的函数参数详解
1. 带默认值的参数 在了解带星号(*)的参数之前,先看下带有默认值的参数,函数定义如下: >> def defaultValueArgs(common, defaultStr = &qu ...
- Matlab v_melcepst函数参数详解(英文附例)
Matlab v_melcepst函数参数详解(英文附例) 笔者使用的是R2019的matlab,下载了voicebox安装至matlab路径下即可使用.下载voicebox请参看此博客 需要注意的是 ...
- python中def func是什么意思_Python的函数参数详解
原标题:Python的函数参数详解 前言 Python中函数的参数可以分为两大类形参和实参~ def func(x, y): # x, y 就是形参 print(x, y) func(2, 3) # ...
最新文章
- 软件开发向大数据开发过渡_如果您是过渡到数据科学的开发人员,那么这里是您的最佳资源...
- (二) LtRecyclerView v2.x (更多实用方法)
- iris流程图_如何搭建一个简单的机器学习流水线?
- LoadRunner的Socket脚本关联小技巧
- 腾达路由器dns服务器未响应,腾达路由器的设置方法
- Go Little Book - 第三章 - 字典 ,数组和切片
- 计算机跳转列表常用组合框,2015计算机二级VB考点复习指导:列表框和组合框
- carrot 2 LingoClusteringAlgorithm , STCClusteringAlgorithm 和 BisectingKMeansClusteringAlgorithm算法比较
- oracle语句查询时间范围,oracle时间范围查询
- 三菱plc指令dediv_三菱 PLC梯型图(指令编码)反汇编程序--开源 PLC 编程重点参考资料...
- 【NanoPi2试用体验】nanopi2下的二维码识别
- [OpenCV练习题实现] 尝试找到一种方法来提取多个彩色对象,例如,同时提取红色,蓝色,绿色对象。
- Class-incremental Learning via Deep Model Consolidation 翻译
- P28 Elastic Beanstalk
- 迪杰斯算法c语言,欧博体育APP-欧博体育APP
- 线性代数(4):伴随矩阵、逆矩阵和矩阵的秩
- Java 移除重复节点 | 编写代码,移除未排序链表中的重复节点。保留最开始出现的节点。
- 计算机网络期末复习提纲,湖南科技大学《计算机网络微课堂》课题笔记
- 【锐捷交换】接入交换机配置DHCP Snooping + IP Source guard + ARP-check
- 使用U盘代替光盘来刻录ISO镜像文件的方法
热门文章
- kali 19.2 搭建ftp服务器
- nyoj--58--最少步数
- NYOJ--102--次方求模
- Jenkins Pinned Plugins(Jenkins绑定插件)
- python如何删除对象属性_如何销毁python中属性中的对象?
- java包装经验_java中基本类型和包装类型实践经验
- linux 0.11根文件系统,构建一个最小Linux根文件系统
- mysql什么情况下死锁_2020-07-08:mysql只有一个表a,什么情况下会造成死锁,解决办法是什么?...
- android继承图,Android图形系统(三)-View绘制流程
- UGUI 在面板经常使用的表格布局制作