Plusieurs méthodes d'interception de routage de vue

Avec le développement continu de la technologie front-end, le framework vue est de plus en plus privilégié par les développeurs. Lors du développement d'un projet Vue, le routage est un composant très important. Grâce au routage, le changement de page et la réutilisation des composants d'une application monopage (SPA) peuvent être obtenus, ce qui peut améliorer les performances du projet et l'expérience utilisateur. Afin d'assurer la sécurité et la fiabilité du projet, nous devons ajouter des intercepteurs au routage pour bloquer ou rediriger les requêtes illégales. Cet article présentera plusieurs méthodes d'interception de routage Vue pour vous aider à comprendre rapidement les principes et les méthodes de mise en œuvre de l'interception de routage Vue.

1. Global front guard

Vue Router fournit une front guard globale, qui peut intercepter les demandes avant la commutation de routage. Les pré-gardes globales peuvent être utilisées pour vérifier si l'utilisateur est connecté ou pour vérifier si l'utilisateur est autorisé à accéder à la page. Ajoutez le code suivant à router/index.js :

router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token') ? true : false;
  if (to.path == "/login") {
    next();
  } else {
    isLogin ? next() : next('/login');
  }
})

Cet extrait de code sera exécuté avant chaque changement de route pour déterminer si l'utilisateur est connecté. Sinon, il passera à la page de connexion. Il s'agit d'une méthode d'interception de route mondiale très courante, qui peut garantir efficacement la sécurité des utilisateurs et la stabilité du système.

2. Gardettes exclusives à l'itinéraire

Dans Vue Router, vous pouvez définir des gardes distinctes pour chaque itinéraire. Ce type de garde est appelé garde exclusive à l'itinéraire. Les gardes exclusifs de route peuvent être utilisés pour vérifier les paramètres de route, appeler des interfaces asynchrones, traiter des données, etc. Ajoutez le code suivant à router/index.js :

const router = new VueRouter({
  routes: [
    {
      path: '/example/:id',
      component: Example,
      beforeEnter: (to, from, next) => {
        const id = to.params.id;
        if (id > 0 && id < 100) {
          next();
        } else {
          next('/error');
        }
      }
    }
  ]
})

Cet extrait de code sera exécuté avant que la route /example/:id ne soit commutée pour vérifier si l'identifiant du paramètre transmis répond aux conditions. Sinon, passez à "/error". page, sinon continuez à changer de routage. La garde exclusive d'itinéraire est une méthode d'interception d'itinéraire très flexible qui nous permet de contrôler les changements d'itinéraire de manière plus flexible.

3. Global post hook

Semblable à la garde avant globale, Vue Router fournit également un post hook global, qui peut intercepter la réponse après un changement de routage. Les hooks de publication globaux peuvent être utilisés pour gérer certains problèmes logiques après le changement de routage, tels que les statistiques de page, la gestion des erreurs, etc. Ajoutez le code suivant à router/index.js :

router.afterEach(( to, from ) => {
  const currentPath = to.path;
  const params = to.params;
  console.log(`切换到${currentPath}页面，路由参数为${JSON.stringify(params)}`)
})

Cet extrait de code sera exécuté après chaque changement de route et affichera le chemin et les paramètres de la page de routage actuelle. Grâce aux post-hooks globaux, nous pouvons mieux comprendre l'état du routage et les résultats correspondants pour la prochaine étape de développement et de test du projet.

Résumé :

Dans Vue Router, l'interception de route est un composant très important qui peut être utilisé pour améliorer la fiabilité, la sécurité et la stabilité du système. Grâce aux gardes frontales globales, aux gardes exclusives aux itinéraires et aux crochets de poteaux mondiaux, nous pouvons mieux contrôler l'état et le comportement des itinéraires. Dans le processus de développement actuel, nous devons choisir la méthode d'interception d'itinéraire appropriée en fonction de la situation réelle du projet afin de garantir la qualité globale du projet et l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!