CODEWITHSUNDEEP
vuejs2
Alauddin Ahmed
Alauddin Ahmed

Reputation: 1185

Can I handle back button within methods in vuejs 2?

I need some help in vuejs 2. I want to detect back button pressed event. I did some research and found this,

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

I think it is global event. I need something local, within a method. where i can use some logic.

methods: {
    backButtonPressed() {
    }
}

Or can i bind the global one to local function? Can anyone help me with that? TIA

Upvotes: 25

Views: 51151

Answers (6)

Kevin Mendez
Kevin Mendez

Reputation: 668

Is easy, if you need to catch that behavior only your component, you can use beforeRouteLeave function in the root of your component.

Example:

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

But if you need to add this behavior globally, you need catch with beforeEnter in the routes.

Upvotes: 3

Amolik Vivian Paul
Amolik Vivian Paul

Reputation: 21

This was one variation I found to work as well, a little less verbose and uses router.push in the beforeDestroy lifecycle method

  • Listen for popstate
  • Push the desired name/path to redirect

The code below would be a better understanding.

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

This implementation was on Nuxt 2.14.6 and works just as well with all versions of Vue.

Upvotes: 2

Andr&#233; Escocard
Andr&#233; Escocard

Reputation: 50

I have a similar problem and solved using @click="backFunction" and created the function on methods like this:

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

Upvotes: -3

pabloRN
pabloRN

Reputation: 906

If you are using vue-router(no idea if you don't, why...) a good solution is to use in your component:

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

},

Upvotes: 3

webnoob
webnoob

Reputation: 15934

Add the event on your mounted method on your root Vue component (the one the Vue instance is tied to.

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);
  }
})

We also remove it on beforeDestroy to keep things tidy.

Note: I've not personally used the back button event so have added it to this example only because you say it's working but need a way to globally handle it. This code will do just that.

Note: As per @Luke's comment - we add the listener in the mounted event so it doesn't execute for in the SSR context. If SSR isn't a factor / consideration then we can use the created lifecycle hook.

Upvotes: 26

Claudio
Claudio

Reputation: 216

If still someone come across this issue. A solution for an event listener for browser-back is https://developer.mozilla.org/de/docs/Web/API/WindowEventHandlers/onpopstate

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

Upvotes: 11

Related Questions