export default {
data(){
return {
num: 18
}
},
beforeRouteEnter(to, from, next){
next(vm=>{
vm.num=19;
})
}
}
  • vm 表示this ,可以调用 num了

三个钩子函数: beforeRouteEnter, beforeRouteUpdata, beforeRouteLeave

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

  

vue 组件中的钩子函数 不能直接写this的更多相关文章

  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组件级路由钩子函数介绍,及实际应用

    正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 有多种方式可以在路由导航发生时执行钩子:全局的.单个路由独享的.或者组件级的. 一.全局钩子 你可以使用 rout ...

  4. vue组件路由守卫钩子函数(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)

    用法:与mounted,created等同级并列. export default { data() { return { } }, methods: { go() { this.$router.pus ...

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

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

  6. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  7. vue组件中的data为什么是函数?

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

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

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

  9. Vue 组件生命周期钩子

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

随机推荐

  1. Android--Task和BackStack高级

    前言 之前的博客讲到了Android下Activity的启动模式,涉及到了Task和BackStack的内容,对这些不熟悉的朋友,可以先去看看:Android--Activity的启动模式.这篇博客主 ...

  2. Solr 08 - 在Solr Web管理页面中查询索引数据 (Solr中各类查询参数的使用方法)

    目录 1 Solr管理页面的查询入口 2 Solr查询输入框简介 3 Solr管理页面的查询方案 1 Solr管理页面的查询入口 选中需要查询的SolrCore, 然后在菜单栏选择[Query]: 2 ...

  3. 带着萌新看springboot源码12(启动原理 下)

    先继续接上一篇,那个启动原理还有一点没说完. 6. afterRefresh(context, applicationArguments); 看这个名字就知道,应该就是ioc容器刷新之后的一些操作了, ...

  4. java基础4:深入理解final关键字

    本文主要介绍了final关键字的使用方法及原理 具体代码在我的GitHub中可以找到 https://github.com/h2pl/MyTech 文章首发于我的个人博客: https://h2pl. ...

  5. 经典面试题|讲一讲JVM的组成

    JVM(Java 虚拟机)算是面试必问的问题的了,而但凡问 JVM 一定会问的第一个问题就是:讲一讲 JVM 的组成?那本文就注重讲一下 JVM 的组成. 首先来说 JVM 的组成分为,整体组成部分和 ...

  6. java web 项目打包(war 包)并部署

    1.在eclipse中右键单击项目,然后Export选择WAR file,生成项目的WAR文件.具体步骤请看图片详细操作步骤: 2.把生成的WAR文件放到tomcat解压之后的webapps文件夹下. ...

  7. 巨杉数据库入选Gartner数据库报告,中国首家入选厂商

    SequoiaDB巨杉数据库入选Gartner数据库报告,成为国内首批入选Gartner报告的数据库厂商. “SequoiaDB, 总部位于中国广州,是一款分布式.多模型(Multimodel).高可 ...

  8. Sqlserver 2008R2设置数据库只对特定用户可见

    REVOKE VIEW ANY DATABASE TO [public] --这个是取消数据库公开的权限,也就是除了sa角色外任何人都不能查看数据库 Sa可以查看所有数据库, 新建一个名称为test的 ...

  9. SpringDay01

    Spring的控制反转 Spring的依赖注入 多种注入方式 多种属性的注入方式 <bean id="userDao" class="dao.UserDaoImpl ...

  10. python运行逻辑

    Python程序在解释器上执行分两个过程: 编译:如果Python进程在机器上拥有写入权限,那么它会把程序的字节码保存为一个以 .pyc 为扩展名的文件.当程序运行后,会在源代码的同一个目录下看到 . ...