How to deal with the back button in Vue?

Here you go: https://stackoverflow.com/questions/47974777/can-i-handle-back-button-within-methods-in-vuejs-2

Here is an S.O. on history: https://stackoverflow.com/questions/49958366/state-history-with-browser-back-button-vue-js

Hi @bobbybouwmann

I tried adding this but from what I can see document.addEventListener("backbutton" only works on devices? When I press back it doesn't fire the method.

@jlrdw Is there not a simple way to detect the back button without having to store something?

@chrisgrim The back button is a feature from the browser itself, not from your website. It's really hard to hook into this action.

Would this work?

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    document.addEventListener('backbutton', function (e) {
        e.preventDefault();
        console.log('Back button prevented page from going back');
        // Put axios code here
    }, false);
}

@fylzero That doesn't seem to work sadly. I am thinking the only way to deal with this is just to do an axios get everytime the page loads instead of trying to bind the data through laravel.

Generally speaking it's best to avoid the back button in any web application. Especially one where Ajax is ever involved.

However it's hard to prevent users from doing that.

Something like this may or may not work.

https://stackoverflow.com/questions/45541789/how-can-i-disable-back-button-on-the-browser-with-vue-component

I generally only would use JavaScript for small enhancements.

General if a page is not loaded with all kinds of unnecessary things a normal page load is just fine.

But when you see left menus right menus top navs all over the place most Pages do not need all that stuff, they just need a link back to the main nav page.

Im starting to see that this is actually a pretty big issue! I am going to have to re-look at how I set it up. I was thinking that I could just do

mounted(){
    //axios get call here to get data
}

but if the user presses the back button for some reason the data I get from axios is actually old

If you use html5 routing with vue-router, back button support is automatic ... beyond that -- please don't hijack the default behavior of the back button, it's endlessly frustrating for the user for things to not behave normally.

@willvincent I guess I was thinking I might do the popup saying your data will be lost if you leave? Does that mess with the user?

@chrisgrim That might be the only real acceptable reason to interrupt normal navigation, so long as it's not something you do everywhere ... carry on :)

Actually I decided to just rewrite all my code and instead of using a prop to bind the data I am using a mounted() axios get request. Not as clean looking but it always gets the latest data even if the user presses the back button.

You probably need to do reload the data on a navigation guard, most likely beforeRouteUpdate:

https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

Aren't you relieved it doen't work? :)

Imagine how many sites would abuse such functionality.

You're best warning people beforeahdn. Something as follows should work:

window.onbeforeunload = function() { return "Your work will be lost."; };

I am actually happy that it doesnt work :)

With Vue router you can use the beforeRouteLeave navigation guard

In you component:

    beforeRouteLeave(to, from, next) {
      if (confirm('You may have unsaved changes. Do you want to continue?')) {
        return next()
      }
    }

https://web.dev/bfcache/