How to handle on browser back button click event in Vuejs

Question

In Vue component, I want to handle on browser back event like this:

mounted() {
  if ([browser back]) {
    console.log("browser back button clicked")
  } else {
    console.log("stay here")
  }
}

To handle browser back event, I found window.onpopstate function but I don't know how to put it inside the if statement.

Can you tell me what should I do on this case? Thank you!

Martin · Accepted Answer · 2022-05-13 07:52:07Z

5

You don't need to put inside an if statement. The event handler is sort of an "if statement".

See this example:

mounted() {
   // if back button is pressed
   window.onpopstate = function(event) {
     alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
   };
}

edited May 13, 2022 at 7:52

Martin

134 bronze badges

answered Nov 20, 2019 at 9:06

Kalimah

11.5k11 gold badges48 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

The Blues Over a year ago

But in not browser back case, how can i handle this?

Kalimah Over a year ago

When in normal mode (before back pressed) you can add any code to mounted then override it in onpopstate. Are you checking for hash changes in url?

Collectives™ on Stack Overflow

How to handle on browser back button click event in Vuejs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related