Deaktivieren Sie die Funktionen „Nächste Seite' und „Vorherige Seite' von Vue3, die auf Browser unter demselben Routing-Pfad beschränkt sind.

Question

Heute stehe ich vor einem Problem und brauche Rat.

Ich habe eine Routing-Seitenstruktur wie diese {url}/:id. Mein Ziel ist es, zu verhindern, dass der Benutzer auf derselben Route zur vorherigen und nächsten Seite navigiert, beispielsweise von {url}/1 nach {url}/2. Ich führe API-Aufrufe durch, um die Daten auf der Seite zu ändern, und die URL ändert sich entsprechend.

Ich möchte jedoch, dass der Benutzer zu Seiten vor oder nach {url}/:id navigieren kann, jedoch nicht innerhalb von {url}/:id.

Können Sie Lösungen oder Vorschläge machen? Ich habe gehört, dass Navigationswächter hilfreich sein könnten, aber es fiel mir zunächst schwer, sie zu verstehen.

Vielen Dank im Voraus für Ihre Hilfe!

---

Tut mir leid, die Erklärung ist nicht klar. Ich möchte, dass sich der Browser daran erinnert, dass die vorherige oder nächste Seite eine andere Seite ist, wie {url}/lists oder {url}/news, aber ich kann mich nicht an dieselbe Routing-Seite erinnern, also in der Browser Nachdem Sie auf die Schaltfläche geklickt haben, gelangen Sie nicht zur gleichen Routing-Seite...

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