Question 178147 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can Javascript & Vue3 disable next/prev page in browser when on same route path?

Today I’m facing a problem and I could use some advice.

I have a route page structure like {url}/:id. My objective is to prevent users from navigating to the previous and next pages within the same route, for example, from {url}/1 to {url}/2. I am making API calls to change the data on the page, and the URL does change accordingly.

However, I want users to be able to navigate to the page before or after the {url}/:id, but not within the {url}/:id itself.

Is there any solution or advice you can provide? I have heard that navigation guards might be helpful, but I find them difficult to understand initially.

Thank you in advance for your assistance!

Sorry for bad explanation, I need the browser remember the prev page or next page is another, like {url}/lists or {url}/news, but does not remember the same route page, so it won’t go to the same route page after clicking the button on the browser…

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found that this.$router.replace({ path: '/your-route' }); instead of router.push solved my problem.


  2. 0

    Here’s a high-level example using Vue Router:

    router.beforeEach((to, from, next) => {
  if (to.params.id && from.params.id) {
    if (to.params.id !== from.params.id) {
      next(); // Allow navigation to the next page within the route
    } else {
      next(false); // Block navigation to the same page within the route
    }
  } else {
    next(); // Allow navigation to other routes
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search