Désactivez les fonctions de page suivante et de page précédente de Vue3, qui sont limitées aux navigateurs sous le même chemin de routage.

Question

Aujourd'hui, je suis confronté à un problème et j'ai besoin de conseils.

J'ai une structure de page de routage comme celle-ci {url}/:id. Mon objectif est d'empêcher l'utilisateur de naviguer vers la page précédente et suivante au sein du même itinéraire, par exemple de {url}/1 à {url}/2. J'effectue des appels API pour modifier les données de la page et l'URL change en conséquence.

Cependant, je souhaite que l'utilisateur puisse naviguer vers les pages avant ou après {url}/:id, mais pas dans {url}/:id.

Pouvez-vous fournir des solutions ou des suggestions ? J'ai entendu dire que les gardes-navigateurs pourraient être utiles, mais j'ai eu du mal à les comprendre au début.

Merci d'avance pour votre aide !

---

Désolé, l'explication n'est pas claire, j'ai besoin que le navigateur se souvienne que la page précédente ou la page suivante est une autre page, comme {url}/lists ou {url}/news, mais ne se souvienne pas de la même page de routage, donc dans le navigateur Après avoir cliqué sur le bouton, vous n'entrerez pas dans la même page de routage...

Answer 1

J'ai découvert

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

au lieu de

router.push

Résolu mon problème.

Answer 2

Voici un exemple avancé utilisant 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(); // 允许导航到其他路由
  }
});