vuejs run function after click back button in browser

Question

I load a component inside my vuejs page which is only visible after a certain button is pressed. But if the usere uses not the BACK BUTTON from the BROWSER, it doen't close my component and maked the "original" component visible, it jumes back to the page before.

I need to prevent this behaviour. What I want to do is:

Stop the "GO BACK" action
Run a function instead

I tried the following already and it runs the function when someone clicks the "BACK BUTTON" in the browser but it doesn't prevent the "GO BACK ACTION".

mounted() {
    window.onpopstate = () => {
      this.closeDetailedView()
    }
  },

The closeDetailedView function does the folowing:

closeDetailedView() {
  this.$emit('closeDetailedView')
},

Can someone help me?

thanks

Vanishdark · Accepted Answer · 2021-02-10 15:11:17Z

2

You can use the event listener to do what you want and use history.pushState to "overwrite" the state to your current one!

history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

The event listener will detect when the user clicks the button.

If you want to keep your current code

window.onpopstate = () => {
  history.pushState(null, null, document.URL);
  this.closeDetailedView();
}

answered Feb 10, 2021 at 15:11

Vanishdark

1701 silver badge11 bronze badges

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

1 Comment

Chris Over a year ago

Thanks Vanishdark, worked perfectly!! I used it the following way in the mounted hook

history.pushState(null, null, document.URL)     window.addEventListener('popstate', () => {       //history.pushState(null, null, document.URL)       this.closeDetailedView()     })

Collectives™ on Stack Overflow

vuejs run function after click back button in browser

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related