[问题探讨]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=false
      next(false);
   }else{
    //反之，则next(true)计入next组件(A组件) 
       next(true);
   }         
} 

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

博文通览提示：

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

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

最后

以上就是娇气薯片为你收集整理的[问题探讨]VUE导航守卫beforeRouteLeave实现路由跳转拦截的全部内容，希望文章能够帮你解决[问题探讨]VUE导航守卫beforeRouteLeave实现路由跳转拦截所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。