Disable Vue3's next page and previous page functions, which are limited to browsers under the same routing path.

Question

Today I am facing a problem and I need some advice.

I have a routing page structure, like this {url}/:id. My goal is to prevent the user from navigating to the previous and next page within the same route, for example from {url}/1 to {url}/2. I'm making API calls to change the data on the page and the URL changes accordingly.

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

Can you provide any solutions or suggestions? I've heard that navigation guards might be helpful, but I had a hard time understanding them at first.

Thank you in advance for your help!

---

Sorry, the explanation is not clear. I need the browser to remember that the previous page or next page is another page, like {url}/lists or {url}/news, but not the same routing page, so in After clicking the button on the browser, you will not enter the same routing page...

Answer 1

I find

this.$router.replace({ path: '/your-route' });

instead of

router.push

Solved my problem.

Answer 2

This is an advanced example using Vue Router:

router.beforeEach((to, from, next) => {
  if (to.params.id && from.params.id) {
    if (to.params.id !== from.params.id) {
      next(); // 允许在路由内导航到下一页
    } else {
      next(false); // 阻止在路由内导航到同一页
    }
  } else {
    next(); // 允许导航到其他路由
  }
});