Question

我需要在vuejs 2中提供一些帮助。我想检测后退按钮事件。我做了一些研究，发现了这个，

document.addEventListener("backbutton", yourCallBackFunction, false");

我认为这是全球性事件。在方法中我需要一些本地的东西。在哪里我可以使用一些逻辑。

methods: {
    backButtonPressed() {
    }
}

或者我可以将全局一个绑定到本地函数吗？任何人都可以帮助我吗？ TIA

Answer 1

在根Vue组件上的created方法上添加事件（与Vue实例绑定的那个。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    yourCallBackFunction () {
      // Your logic
    }
  }
  created () {
    document.addEventListener("backbutton", this.yourCallBackFunction, false);
  },
  beforeDestroy () {
    document.removeEventListener("backbutton", this.yourCallBackFunction);
  }
})

我们也会在beforeDestroy上删除它以保持整洁。

注意：我没有亲自使用后退按钮事件，因此仅将其添加到此示例中，因为您说它正在运行但需要一种全局处理它的方法。这段代码就是这样做的。

Answer 2

如果仍然有人遇到此问题。用于浏览器后退的事件侦听器的解决方案是https://developer.mozilla.org/de/docs/Web/API/WindowEventHandlers/onpopstate

window.onpopstate = function() {
  alert('browser-back');
};

Answer 3

如果您使用的是vue-router（不知道为什么不使用，为什么...），一个很好的解决方案是在组件中使用

  beforeRouteLeave(to, from, next) {
 if (from.name === 'nameOfFromRoute' && to.name === 'nameOfToRoute' ) {
   next(false);
 } else {
   next();
 }
 console.log({ to, from });

}，

Answer 4

很容易，如果您只需要捕获组件的行为，则可以在组件的根目录中使用beforeRouteLeave函数。

示例：

beforeRouteLeave (to, from, next) {
 const answer = window.confirm('Do you really want to leave?)
   if (answer) {
      next()
   } else {
      next(false)
   }
 }

但是，如果您需要全局添加此行为，则需要在路由中使用beforeEnter进行捕获。

Answer 5

我有一个类似的问题并使用 @click="backFunction" 解决了并在这样的方法上创建了函数：

methods: {
backFunction(){
//yourlogic
},

我可以在vuejs 2中的方法中处理后退按钮

5 个答案: