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'); // undefined
console.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可以看到打印如下:
vue组件独享守卫钩子函数参数详解(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)的更多相关文章
- vue路由导航守卫及前置后置钩子函数参数详解
首先构建一个测试demo如下图: 接着来探讨路由配置界面 import Vue from 'vue' import Router from 'vue-router' // import HelloWo ...
- PHP date函数参数详解
PHP date函数参数详解 作者: 字体:[增加 减小] 类型:转载 time()在PHP中是得到一个数字,这个数字表示从1970-01-01到现在共走了多少秒,很奇怪吧 不过这样方便计 ...
- Python函数参数详解
Python函数参数详解 形参与实参 什么是形参 在定义函数阶段定义的参数称之为形式参数,简称形参,相当于变量名. 什么是实参 在调用函数阶段传入的值称为实际参数,简称实参.相当于"变量值& ...
- Go语言Slice作为函数参数详解
Go语言Slice作为函数参数详解 前言 首先要明确Go语言中实质只有值传递,引用传递和指针传递是相对于参数类型来说. 个人认为上诉的结论不对,把引用类型看做对指针的封装,一般封装为结构体,结构体是值 ...
- vue的生命函数周期以及钩子函数的详解
首先我们先附上官网的图 图中展现出的是vue整个生命周期以及钩子函数 1- beforeCreate(创建前) 2- created(创建完成) 3- beforeMount(挂载前) 4- mo ...
- 【集成学习】sklearn中xgboot模块中fit函数参数详解(fit model for train data)
参数解释,后续补上. # -*- coding: utf-8 -*- """ ############################################## ...
- vue路由独享守卫beforeEnter
在某个路由中,使用beforeEnter()方法,参数是to,from,next 和全局路由守卫的用法是一样的 例子: import Vue from 'vue' import Router from ...
- CGBitmapContextCreate函数参数详解
函数原型: CGContextRef CGBitmapContextCreate ( void *data, size_t width, size_t height, size_t bitsPerCo ...
- CGBitmapContextCreate函数参数详解 以及在 ios7下变化
函数原型: CGContextRef CGBitmapContextCreate ( void *data, size_t width, size_t height, size_t ...
随机推荐
- Android scrollview和GridView混合使用
在开发中用到了需要ScrollView嵌套GridView的情况,由于这两款控件都自带滚动条,当他们碰到一起的时候便会出问题,即GridView会显示不全.解决办法,自定义一个GridView控件 p ...
- Java成员变量和局部变量
Java成员变量和局部变量 一.成员变量和局部变量 二.static关键字 三.成员变量和静态变量区别 四.main函数 五.静态函数什么时候用 六.静态代码块 七.构造代码块 构造代码块先于构造函数 ...
- python-day59--前端 jQuery
一.什么是jQuery? http://jquery.cuishifeng.cn/ 类似Python里面的模块 是js的一个库/插件/工具 二.JS和jQuery的关系 - jQuery就 ...
- dp入门:最长不下降序列
#include "bits/stdc++.h" using namespace std; ],dp[]; int main() { int n; cin >> n; ...
- OC MRC之循环引用问题(代码分析)
// // main.m // 07-循环引用 // // Created by apple on 13-8-9. // Copyright (c) 2013年 itcast. All rights ...
- silent install oracle 11.2.0.1 x86_64 for linux
su - root#groupadd oinstall#useradd -g oinstall oracle#passwd oracle#mkdir -p /u01/app/oracle#chown ...
- spring cloud学习(五)断路器 Hystrix
断路器 Hystrix 断路器模式 (云计算设计模式) 断路器模式源于Martin Fowler的Circuit Breaker一文. 在分布式环境中,其中的应用程序执行访问远程资源和服务的操作,有可 ...
- office2013安装和破解教程
office2013安装和破解教程(非常简单) 工具/原料 ·电脑 ·office2013 ·HEU_KMS_Activator_CH_v7.6a(激活软件) 方法/步骤 1.1下载Microsoft ...
- SQL中游标的使用(转)
http://www.cnblogs.com/tianguook/archive/2011/03/09/1977987.html 一般情况下,我们用SELECT这些查询语句时,都是针对的一行记录而言, ...
- delphi中使用MSWINSCK.OCX控件
1.首先是把winsck控件导入到delphi中,就是导入一个ActiveX控件,步骤略过. 2.将导入的winsck控件拖入你的Form中. 3.对winsck进行基本设置(IP,Port). 4. ...