vue微信公众号H5 物理返回问题(百分百有效,本人项目已上线)

路由监听

  watch: {
    $route: {
      handler(val, oldval) {
        if(val.path=="/"){
           this.gobackStaus = true;
           this.setBack();
        }
        if(oldval.path!="/"){
          this.gobackStaus = false;
          window.removeEventListener(
            "popstate",
            function (event) {
              event.preventDefault();
            },
            false
          );
           setTimeout(()=>{
             this.gobackStaus = true;
           },500)          
        }
      },
      // 深度观察监听
      deep: true,
    },
  }, 

返回函数

  methods:{
    setBack() {
      if (window.history && window.history.pushState) {
        history.pushState(null, null, document.URL);
        window.addEventListener("popstate", this.goBack, false);
        console.log("进入返回设置");
      }
    },
    // 返回按钮处理函数
    goBack() {
      if(this.$route.path=="/"&&this.gobackStaus == true){
            this.$router.push({path:"/close"})
      }
    },    
  } 
  // close.vue  做一个空界面
  // 在初始化时 就会触发-关闭浏览器
      beforeCreate(){
         wx.closeWindow()
         window.location.href = "about:blank";
    }

界面响应

mounted() {
  this.setBack();
}

界面销毁

  destoryed() {
    window.removeEventListener("popstate", this.goBack, false);
  },

你可能感兴趣的:(web,微信公众号,vue.js,微信,前端)