官方文档:

const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当钩子执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
export default {
data(){
return {
num: 18
}
},
beforeRouteEnter(to, from, next){
next(vm=>{
vm.num=19;
})
}
}

.

vue-router钩子beforeRouteEnter函数获取到this实例的更多相关文章

  1. VUE -- router 传参和获取参数

  2. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  3. 解决vue组件内前置路由守卫beforeRouteEnter无法获取上下文this

    问题描述 vue框架,只有在报名页面报名成功,然后自动跳转到订单详情,才弹出一个引流弹窗,其他情况均不弹出,我就想到使用vue 的组件内前置守卫beforeRouteEnter来实现.beforeRo ...

  4. vue之router钩子函数

    模块一:全局导航钩子函数 1.vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每 ...

  5. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  6. vue的钩子函数

    1.computed 计算属性 计算属性将被混入到 Vue 实例中.所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 1..aPlus: { get: function ...

  7. vue - 过滤器-钩子函数路由

    一.关于路由 1.使用vue router 本质上是声明一种可以通过路径进行 挂子,用子 找到对应的 template 进行页面渲染 <!DOCTYPE html> <html la ...

  8. 每日技术总结:vue router传参方式,js获取设备高度

    今天貌似没什么问题,23333…… 1.vue router 路由传参的方式 应用情景:从分类页(category.vue)进入商品列表页(list.vue),需要传递商品分类id(catId),商品 ...

  9. Vue router中携带参数与获取参数

    Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...

随机推荐

  1. python - 目录处理

    # -*- coding:utf-8 -*- '''@project: jiaxy@author: Jimmy@file: study_文件目录操作.py@ide: PyCharm Community ...

  2. jmeter所有版本下载路径

    https://archive.apache.org/dist/jmeter/binaries/

  3. 利用Python访问Mysql数据库

    首先要明确一点,我们在Python中需要通过第三方库才能访问Mysql. 有这样几种方式:Mysql-python(即MySQLdb).pymysql.mysql-connector.Mysql-py ...

  4. git基本常用命令总结

    官网:https://git-scm.com/book/zh/v1/Git-%E5%9F%BA%E7%A1%80-%E5%8F%96%E5%BE%97%E9%A1%B9%E7%9B%AE%E7%9A% ...

  5. ambari单节点集群塔建

    配置2台机器,发别为ambari01.ambari03.ambari01上部署Ambari-server和Mirror server,另一台机器上部署agent. 一.配置静态IP 运行命令,让配置生 ...

  6. 【bzoj3566】[SHOI2014]概率充电器 树形概率dp

    题目描述 著名的电子产品品牌 SHOI 刚刚发布了引领世界潮流的下一代电子产品——概率充电器:“采用全新纳米级加工技术,实现元件与导线能否通电完全由真随机数决定!SHOI 概率充电器,您生活不可或缺的 ...

  7. 【bzoj1965】 [Ahoi2005]SHUFFLE 洗牌 欧拉定理

    题目描述 为了表彰小联为Samuel星球的探险所做出的贡献,小联被邀请参加Samuel星球近距离载人探险活动. 由于Samuel星球相当遥远,科学家们要在飞船中度过相当长的一段时间,小联提议用扑克牌打 ...

  8. 刷题总结——分糖(ssoj 容斥原理+逆元+快速幂+组合数求插板)

    题目: 题目描述 有 N 个(相同的)糖果,M 个(不同的)小朋友.M 和 N 满足:1≤M≤N≤100000(105).要求:1.每个小朋友都至少有一个糖果.2.不存在正整数 X(X>=2), ...

  9. linux内核学习之四:进程切换简述【转】

    转自:http://www.cnblogs.com/xiongyuanxiong/p/3531884.html 在讲述专业知识前,先讲讲我学习linux内核使用的入门书籍:<深入理解linux内 ...

  10. webUpload上传插件的一些bug

    当你给上传按钮的父级或当前元素添加一个display:none时 你可能遇到了这样的一个问题.当你在点击显示这个按钮时 你发现按钮失效了 你需要点击F12才可以. flash 版本太低,请至少大于等于 ...