对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 相关文章推荐
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
Vue中props的详解
May 16 Javascript
深入学习JavaScript中的bom
May 27 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
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
prototype 的说明 js类
2006/09/07 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
angular 服务随记小结
2019/05/06 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
环境科学专业研究生求职信
2013/10/02 职场文书
个人实用简单的自我评价
2013/10/19 职场文书
最新茶叶店创业计划书
2014/01/14 职场文书
担保书格式及范文
2014/04/01 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
公安机关起诉意见书
2015/05/20 职场文书
2015年党小组工作总结
2015/05/26 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
活动新闻稿范文
2015/07/17 职场文书