停用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(); // 允许导航到其他路由
  }
});