对Vue beforeRouteEnter 的next执行时机详解


Posted in Javascript onAugust 25, 2018

背景

今天在用vue实现界面的时候,想在beforeRouteEnter钩子函数中去获取数据,然后通过next方法设置到跳转页面的实例中,结果发现数据一直没办法在界面渲染的时候赋值,苦思不得其解,遂google之,终寻原因,记录之。

注意

beforeRouteEnter (to, from, next) {
 console.log(this); //undefined,不能用this来获取vue实例
 console.log('组件路由钩子:beforeRouteEnter');
 next(vm => {
  console.log(vm); //vm为vue的实例
  console.log('组件路由钩子beforeRouteEnter的next');
 });
 }
next(vm=>{console.log(‘next') })

这个里面的代码很晚执行,执行时机在组件mounted周期之后

拓展知识:对vue中的beforeRouteEnter()和beforeRouteLeave()的函数解释

1、beforeRouteEnter(to, from, next){

要执行的代码操作

next();

}

beforeRouteEnter:进入路由之前执行的函数。

next();   --》 必须有这个,相当于一个按钮开启一样。

2、beforeRouteLeave(to, from, next){

要执行的代码操作

next();

}

beforeRouteLeave:离开路由之前执行的函数。

next();   --》 必须有这个,相当于一个按钮开启一样。

以上这篇对Vue beforeRouteEnter 的next执行时机详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
深入了解JavaScript 私有化
May 30 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 #Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 #Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 #Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 #Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 #Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 #Javascript
对vue 键盘回车事件的实例讲解
Aug 25 #Javascript
You might like
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
理清apply(),call()的区别和关系
2011/08/14 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
wxPython窗口中文乱码解决方法
2014/10/11 Python
Python isinstance函数介绍
2015/04/14 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python2随机数列生成器简单实例
2017/09/04 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
Python爬取网页信息的示例
2020/09/24 Python
python 常见的反爬虫策略
2020/09/27 Python
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
机械电子工程专业推荐信范文
2013/11/20 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
综治维稳工作汇报
2014/10/27 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL