Enhancing the solution provided by @yair-levy.

Creating a separate method navigate for wrapping push may not be ideal as you often need to call push() from multiple locations. Instead, it is more efficient to patch the router's original methods in one central location without altering the existing code.

The following snippet represents my Nuxt plugin designed to prevent navigation triggered by back/forward buttons (particularly useful in an Electron app to prevent undesirable navigation caused by mouse 'back' button). This concept can also be applied to vanilla Vue and managing common back button actions alongside custom handling.

export default ({ app }, inject) => {
  // For Nuxt usage, access the router through the 'app' parameter
  const { router } = app

  let programmatic = false
  ;(['push', 'replace', 'go', 'back', 'forward']).forEach(methodName => {
    const method = router[methodName]
    router[methodName] = (...args) => {
      programmatic = true
      method.apply(router, args)
    }
  })

  router.beforeEach((to, from, next) => {
    if (from.name === null || programmatic) {
      // Navigation triggered by router.push/go/...
      next()
    } else {
      // Navigation triggered by user using back/forward button
      next(false)
    }
    programmatic = false // Reset flag
  })
}

According to @Yuci, the router hook callbacks are executed prior to popstate being updated, making them unsuitable for this particular scenario

Here is what you can do:

methods: {
    navigate(location) {
        this.internalNavigation = true;
        this.$router.push(location, function () {
            this.internalNavigation = false;
        }.bind(this));
    }
}

1. Wrap 'router.push' with your own 'navigate' function
2. Prior to calling router.push, set the 'internalNavigation' flag to true
3. Utilize Vue Router's 'oncomplete' callback to reset the internalNavigation flag to false

You can now assess the flag within the beforeEach callback and handle it as needed.

router.beforeEach((to, from, next) => {
  if ( this.internalNavigation ) {
      //Do what needs to be done
  }
  next()
})

After much time spent refining the codes, I finally found a straightforward solution to this issue that works seamlessly in my case.

export const handleBackButton = () => {
    router.beforeEach((to, from, next) => {
        if (window.event.type == 'popstate' && from.name == 'HomePage'){  
            next(false);
        }else{  
            next(); 
        }
    });
}

• The window.event.type == 'popstate' verifies the back button press event
• And from.name == 'HomePage' confirms the page on which the back button is activated or where you are navigating from.
• 'HomePage' is used as the specific name for disabling the back button. You can omit this condition to disable it site-wide.
• next(false) and next() control navigation by stopping or allowing it respectively.
• You can store this code in a navigationGuard.js file and import it into your main.js file
• I experimented with various methods, including component calling, but they caused glitches and noticeable rerouting. This method, however, eliminates any such issues.

I hope this solution proves useful for you. Best of luck!

If you're facing a challenge in Vue Router, there's a built-in method in the Vue Router API that can help tackle it. Check out this link for more information: https://router.vuejs.org/api/interfaces/RouterHistory.html#listen

Here's the concept:

// /src/router/index.ts

// Define an external variable to keep track of back button usage
let navigationInfo = null;
router.options.history.listen((to, from, info) => {
  // Implement side effects as needed
  navigationInfo = info;
});

router.beforeEach((to, from) => {
  if (navigationInfo && navigationInfo.direction === 'back') {
    // Perform desired actions when navigating back
  }
});

In my scenario, I wanted to intercept the mobile browser's back button click to navigate one level up manually from the current page. The code snippet I used looked like this:

let direction = "";
router.options.history.listen((to, from, info) => {
  direction = info.direction;
});

router.beforeEach((to, from) => {
  const isBackNavigation = direction === "back";
  // Reset the external variable
  direction = "";

  // Ensure that back-navigation path shouldn't be longer than the current one
  if (isBackNavigation && to.path.length > from.path.length) {
    // Construct a trimmed "1 level up" path
    return from.path.split("/").slice(0, -1).join("/");
  }
});

It's important to note that for the "1 level up" strategy to work effectively, each part of the URL should have a corresponding route defined.

In my experience with my Vue App, I encountered a challenge distinguishing Back Button navigation from other types of navigation.

To address this issue, I implemented a solution in which I added a hash to my actual internal App navigation. This allowed me to differentiate between intentional App navigation and Back Button navigation.

For instance, when on the /page1 route, I needed to detect Back Button navigations to close any open modals. If I truly intended to navigate to another route, I would append a hash to that route: /page2#force

beforeRouteLeave(to, from, next) {
    // if no hash then handle back button
    if (!to.hash) {
      handleBackButton();
      next(false); // this stops the navigation
      return;
    }
    next(); // otherwise navigate
}

This approach may seem simple, but it effectively solves the problem. When using hashes for purposes beyond this scenario, be sure to verify their contents in your application.

performance.navigation is now deprecated, so be cautious! https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

When registering a global event listener, it's important to handle it carefully. The listener will remain active from the moment of registration until manual unregistration. In my case, I registered a popstate listener when the component was created to respond to actions triggered by:

• Clicking the browser back button
• Using alt + arrow back
• Clicking the back button on the mouse

Afterwards, I made sure to unregister the popstate listener to prevent unnecessary calls in other components where it wasn't needed - keeping code and method calls clean :).

Here is a snippet of my code:

    created() {
      window.addEventListener('popstate', this.popstateEventAction );
    },
    methods: {
      popstateEventAction() {
        // ... perform specific action for back button clicks
        this.removePopstateEventAction();
      },
      removePopstateEventAction() {
        window.removeEventListener('popstate', this.popstateEventAction);
      }
   }

Best regards!

The solution that was initially suggested didn't quite do the trick for me. Upon further investigation, I realized that there was a delay of 1 click in the listener, possibly linked to the issue raised by @Yuci.

However, I found that the answer provided by @farincz suited my needs perfectly. Even though it wasn't tailored for vanilla Vue, I decided to share my adaptation here:

// after createRouter
let programmatic = false;
(['push', 'replace', 'go', 'back', 'forward']).forEach(methodName => {
  const method = router[methodName]
  router[methodName] = (...args) => {
    programmatic = true
    method.apply(router, args)
  }
})

router.beforeEach(async (to, from) => {
  if(!from.name === null || !programmatic) {
    // Add your logic for back/forward navigation or page reload here
  }
  programmatic = false // Reset flag
});

My creativity sparked after reading this post, leading me to identify and resolve a minor bug.

let navigationInfo = null
router.options.history.listen((to, from, info) => {
  // controlling navigation flow is not possible here
  // implementing some side effects
  navigationInfo = info
})

router.beforeEach(() => {
  if (navigationInfo) {
    if (navigationInfo.direction === 'back') {
      console.log('back')
    } else if (navigationInfo.direction === 'forward') {
      console.log('forward')
    }
    // resetting to null is necessary
    navigationInfo = null
  }
})