用法:与mounted,created等同级并列。

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();
}
}

  

vue组件路由守卫钩子函数(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)的更多相关文章

  1. vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)

    1.vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave):http://www.menvscode.com/detail/ ...

  2. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  3. vue 组件中的钩子函数 不能直接写this

    export default { data(){ return { num: 18 } }, beforeRouteEnter(to, from, next){ next(vm=>{ vm.nu ...

  4. vue第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定)

    第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定) #课程目标 熟练掌握动态组件的实现 掌握keep-alive缓存组件,以及相应的钩子函数 熟练掌握递归组件, ...

  5. Vue 组件生命周期钩子

    Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...

  6. Vue源码后记-钩子函数

    vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过 ...

  7. Vue基础进阶 之 Vue生命周期与钩子函数

    Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...

  8. vue教程2-01 vue生命周期、钩子函数

    vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  9. vue组件独享守卫钩子函数参数详解(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)

    一样的和前面路由钩子类似的步骤 首先在demo下面的components下面新建一个test.vue组件 test组件代码 <template> <div class="t ...

随机推荐

  1. 2019春招面试高频题(Java版),持续更新(答案来自互联网)

    第一模块--并发与多线程 Java多线程方法: 实现Runnable接口, 继承thread类, 使用线程池 操作系统层面的进程与线程(对JAVA多线程和高并发有了解吗?) 计算机资源=存储资源+计算 ...

  2. 微信小程序音乐播放

    最近在写一个艾美食艾音乐的微信小程序,其中有用到音乐播放的功能,基本播放切换功能已经实现,但是在反复切换歌曲.重新进入歌曲以及单曲循环.列表循环的测试过程中还是发生了bug,特此写一篇文章,捋一下思路 ...

  3. ueditor 回显html样式会直接出来,无效

    百度了好久,后面发现可以直接这样

  4. MVC autofac 属性注入

    Global文件 public class MvcApplication : System.Web.HttpApplication { private static IContainer Contai ...

  5. Re.多项式求逆

    前言 emmm暂无 多项式求逆目的 顾名思义 就是求出一个多项式的摸xn时的逆 给定一个多项式F(x),请求出一个多项式G(x),满足F(x)∗G(x)≡1(modxn),系数对998244353取模 ...

  6. 【Linux】配置SSH Key到GitHub/GitLab

    Linux配置SSH Key到GitHub/GitLab 准备工作 首先检查下本机是否已经安装了SSH,在终端输入ssh即可: 如果没有安装进行yum安装 # yum -y install opens ...

  7. Java设计模式--装饰器模式到Java IO 流

    装饰器模式 抽象构件角色:给出一个抽象接口,以规范准备接受附加责任的对象. 具体构件角色:定义准备接受附加责任的对象. 抽象装饰角色:持有一个构件对象的实例,并对应一个与抽象构件接口一致的接口. 具体 ...

  8. QTcpSever和QTcpSocket实现多线程客户端和服务端;

    QTcpServer提供了newConnection信号, 可以通过connect实现连接槽函数,利用nextPendingConnection 函数获取连接的QTcpSocket * :也可以继承Q ...

  9. 浅议极大似然估计(MLE)背后的思想原理

    1. 概率思想与归纳思想 0x1:归纳推理思想 所谓归纳推理思想,即是由某类事物的部分对象具有某些特征,推出该类事物的全部对象都具有这些特征的推理.抽象地来说,由个别事实概括出一般结论的推理称为归纳推 ...

  10. C语言面试题大汇总之华为面试题 Eddy整理

    1.局部变量能否和全局变量重名? 答:能,局部会屏蔽全局.要用全局变量,需要使用"::" ;局部变量可以与全局变量同名,在函数内引用这个变量时,会用到同名的局部变量,而不会用到全局 ...