vuejs 2의 메서드 내에서 뒤로 버튼을 처리할 수 있습니까?

vuejs 2의 메서드 내에서 뒤로 버튼을 처리할 수 있습니까?

vuejs 2에 도움이 필요해요뒤로 버튼 누름 이벤트를 감지하고 싶다.제가 조사를 좀 해봤는데 이걸 발견했는데

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

세계적인 이벤트인 것 같아요.지역적인 방법이 필요해논리를 쓸 수 있는 곳이지

methods: {
    backButtonPressed() {
    }
}

아니면 글로벌 기능을 로컬 기능에 바인딩할 수 있습니까?누가 나 좀 도와줄래?TIA

에 이벤트를 추가합니다.mounted루트 Vue 컴포넌트(Vue 인스턴스가 연결되어 있는 컴포넌트)의 메서드.

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

또한 다음 날짜에도 제거해 드립니다.beforeDestroy깔끔하게 하기 위해서요.

주의: 개인적으로 Back button 이벤트를 사용한 적이 없기 때문에 이 예에 추가한 것은 동작하고 있지만 글로벌하게 처리할 방법이 필요하기 때문입니다.이 코드만 있으면 됩니다.

주의: @Luke의 설명에 따라 SSR 컨텍스트에서 실행되지 않도록 마운트된 이벤트에 리스너를 추가합니다.SSR가 요인 또는 고려사항이 아닌 경우created라이프 사이클 훅

만약 누군가가 여전히 이 문제를 발견한다면.브라우저 백 이벤트청취자를 위한 솔루션은 https://developer.mozilla.org/de/docs/Web/API/WindowEventHandlers/onpopstate 입니다.

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

vue-router를 사용하는 경우(사용하지 않으면 알 수 없고, 왜...) 컴포넌트에서 사용하는 것이 좋습니다.

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

},

간단합니다. 컴포넌트만 검출할 필요가 있는 경우는,beforeRouteLeave컴포넌트의 루트에서 기능합니다.

예제:

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

단, 이 동작을 글로벌하게 추가할 필요가 있는 경우에는beforeEnter루트에 있습니다.

이것은 내가 또한 효과가 있다는 것을 알게 된 하나의 변형이다. 조금 덜 장황하고 덜 사용한다.router.pushBeforeDestroy 라이프 사이클 방식에서

• popstate를 리슨
• 원하는 이름/경로를 눌러 리디렉션합니다.

아래 코드가 더 잘 이해될 것입니다.

beforeDestroy() {
  window.addEventListener("popstate", (event) => {
    this.$router.push({ path: <your path> });
  });
},

이 실장은 Nuxt 2.14.6에서 이루어졌으며 모든 버전의 Vue에서도 동일하게 동작합니다.

비슷한 문제가 발생하여 @click="back"을 사용하여 해결했습니다.함수"와 같은 방법으로 함수를 만들었습니다.

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

언급URL : https://stackoverflow.com/questions/47974777/can-i-handle-back-button-within-methods-in-vuejs-2