vue路由检测回退与判断

  1. 使用vue项目在微信浏览器内的h5进行展示,此时的返回按钮为微信自带的返回按钮,在界面中能够使用vue钩子函数进行检测。如果需要在微信小程序内进行内嵌h5,微信小程序界面需要一些关闭界面按钮,来达到用户自身的界面关闭需求

  2. 微信程序的路由回退检测:

        //离开当前页面
        beforeRouteLeave(to, from, next) {

          //  1 操作来自关闭按钮(按钮点击flag)
          if(this.goroomFlag)  {
              next();

          }else{

            //  2 来自移动端界面回退
            next(this.actualBack());
			 //  3 来自移动端界面回退
            next(confirm("是否离开当前界面?"));
          }
        },

此处包含的next方法一定需要写,否则界面不会执行下去
3. 移动端端界面回退检测处理在actualBack方法内,返回值为flase即回退取消/返回值为true即回退操作

   //处理界面回退问题
    actualBack(){
  //离开界面显示
        this.closeDisplay();
        return false;
    },

我在界面回退时,不仅仅只是类似confirm的含义,添加了界面修饰,即此时会有离开的界面提示,在界面中点击离开后,才会离开
vue路由检测回退与判断_第1张图片

closeDisplay方法中包含“仍然离开“按钮逻辑

leaveRoom(){

//按钮点击flag
     if(this.goroomFlag){
         this.$router.go(-1);
     }

 },

你可能感兴趣的:(vue,前端)