对Vue beforeRouteEnter 的next执行时机详解
更新时间：2018年08月25日 15:04:06 作者：DMS程序猿
今天小编就为大家分享一篇对Vue beforeRouteEnter 的next执行时机详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
背景
今天在用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执行时机详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
vue3-vite安装后main.ts文件和tsconfig.app.json文件报错解决办法
Vue.js是一个流行的JavaScript框架,它可以帮助开发者构建交互式Web应用程序,这篇文章主要给大家介绍了关于vue3-vite安装后main.ts文件和tsconfig.app.json文件报错解决办法,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了通过vue手动封装on，emit，off的代码详解，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要为大家详细介绍了Vue实现学生管理功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了vue 双向绑定问题$emit无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
动态路由,动态即不是写死的,是可变的,下面这篇文章主要给大家介绍了关于vue实现动态路由的详细代码示例,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下2024-01-01
我们使用nginx部署Vue项目,实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹,下面这篇文章主要给大家介绍了关于nginx+vite项目打包以及部署的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了vue模态框实现动态锚点，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了vue vue-esign签字板的实例讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要给大家介绍了关于vue导出excel的两种实现方式,在项目中我们可能会碰到导出Excel文件的需求,文中给出了详细的代码示例,需要的朋友可以参考下2023-08-08
最近在使用element-ui的表格组件时,遇到了搜索框功能的实现问题,这篇文章主要给大家介绍了关于如何使用elementUI组件实现表格的分页及搜索功能的相关资料,需要的朋友可以参考下2023-03-03
最新评论