[问题探讨]VUE导航守卫beforeRouteLeave实现路由跳转拦截

本文主要是介绍[问题探讨]VUE导航守卫beforeRouteLeave实现路由跳转拦截，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

beforeRouteLeave (to, from, next) {// 必须调用next(),next(true)进入原计划的下个页面// next(false)进入from页面(即原本的页面)          
}

代码说明如上，背景是移动端+Vue，此问题的实例demo见git地址：

https://github.com/tom-wong666/model.git

问题是：A组件跳转到B组件，点击B组件的按钮打开其自带的C遮罩层(100%遮挡)，C遮罩层自带关闭按钮用以返回(显示)B组件；但是，如果点击移动端的返回按钮(效果同点击浏览器左上方的回退按钮)，页面跳回到A组件了，这和常理相悖，正常应该是点击返回后返回B组件。

解决办法：上代码如下

beforeRouteLeave (to, from, next) {// this.show是组件内定义的data用以判定v-if="show"是否成立if(this.show){//如果show为true是显示状态，则next(false)返回from的组件(B组件)this.show=falsenext(false);}else{//反之，则next(true)计入next组件(A组件) next(true);}         
} 

注意：beforeRouteLeave只在设置了router的第一级组件内有效！

博文通览提示：

点击此超链接跳转到Tom哥的博文分类和索引页面 

Tom哥的博客博文分类和索引页面地址：https://blog.csdn.net/tom_wong666/article/details/84137820

这篇关于[问题探讨]VUE导航守卫beforeRouteLeave实现路由跳转拦截的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---