禁用Vue3的下一页和上一页功能，仅限于同一路由路径下的浏览器使用

Question

今天我面临一个问题，我需要一些建议。

我有一个路由页面结构，像这样{url}/:id。我的目标是防止用户在同一路由内导航到上一页和下一页，例如从{url}/1到{url}/2。我正在进行API调用来改变页面上的数据，URL也相应地发生变化。

然而，我希望用户能够导航到{url}/:id之前或之后的页面，但不能在{url}/:id内部导航。

您能提供任何解决方案或建议吗？我听说导航守卫可能有帮助，但我一开始很难理解它们。

提前感谢您的帮助！

---

对不起，解释不清楚，我需要浏览器记住上一页或下一页是另一个页面，像{url}/lists或{url}/news，但不记住相同路由页面，这样在浏览器上点击按钮后就不会进入相同的路由页面...

Answer 1

我发现

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

而不是

router.push

解决了我的问题。

Answer 2

这是一个使用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(); // 允许导航到其他路由
  }
});