Comment utiliser Vue pour la gestion des itinéraires et le contrôle de la navigation

Comment utiliser Vue pour la gestion du routage et le contrôle de la navigation

Introduction :
Dans le développement front-end moderne, les applications monopage (SPA) sont devenues un modèle de développement courant. En SPA, la gestion du routage et le contrôle de la navigation sont très importants. Le framework Vue fournit un plug-in, Vue Router, pour la gestion du routage frontal et le contrôle de la navigation. Cet article expliquera comment utiliser Vue Router pour la gestion du routage et le contrôle de la navigation, ainsi que quelques exemples d'utilisation courants.

1. Installer et configurer Vue Router
   Tout d'abord, nous devons installer Vue Router dans le projet Vue. Exécutez la commande suivante dans la ligne de commande :

   npm install vue-router

   Copier après la connexion

   Puis dans le fichier d'entrée main.js du projet Vue, introduisez et configurez le Routeur Vue :

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)
   
   const routes = [
     // 定义路由规则
   ]
   
   const router = new VueRouter({
     routes // 在路由中传入定义的路由规则
   })
   
   new Vue({
     router // 在Vue实例中注入Vue Router
   }).$mount('#app')

   Copier après la connexion

2. Définissez et utilisez les routes
   Dans la configuration ci-dessus, nous avons défini le tableau routes Utilisé pour stocker les règles de routage. Dans le tableau, chaque élément de routage peut être défini sous forme d'objets, comprenant des informations telles que des chemins et des composants de routage. L'exemple de code est le suivant :

   const routes = [
     {
    path: '/',
    component: Home
     },
     {
    path: '/about',
    component: About
     }
   ]

   Copier après la connexion

   Dans le code ci-dessus, nous définissons deux éléments de routage, correspondant respectivement aux chemins racine '/' et '/about'. Parmi eux, Accueil et À propos sont les noms de composants correspondants.

3. Rendu de l'itinéraire
   Ensuite, nous devons réellement restituer l'itinéraire dans le composant Vue. Ceci peut être réalisé grâce à la balise , qui restituera dynamiquement le composant correspondant en fonction du chemin de routage actuel. L'exemple de code est le suivant :

   <template>
     <div>
    <router-view></router-view>
     </div>
   </template>

   Copier après la connexion

   Dans le code ci-dessus, nous utilisons la balise pour restituer l'itinéraire et afficher ici le contenu du composant correspondant.

4. Contrôle de navigation
   Vue Router fournit deux composants et , qui sont utilisés respectivement pour implémenter les liens de navigation et afficher le rendu. Nous pouvons utiliser pour créer des liens de navigation. L'exemple de code est le suivant :

   <router-link to="/">Home</router-link>
   <router-link to="/about">About</router-link>

   Copier après la connexion

   Dans le code ci-dessus, nous utilisons la balise à travers l'attribut to.

5. Routage imbriqué
   Dans le développement réel, nous pouvons rencontrer plusieurs niveaux d'exigences de routage pour certaines pages. Vue Router fournit la fonction de routage imbriqué pour répondre à cette exigence. L'exemple de code est le suivant :

   const routes = [
     {
    path: '/',
    component: Home,
    children: [
      {
        path: '',
        component: HomeSubpage1
      },
      {
        path: 'subpage2',
        component: HomeSubpage2
      }
    ]
     }
   ]

   Copier après la connexion

   Dans le code ci-dessus, nous définissons une route parent '/', son composant correspondant est Home et deux routes enfants sont définies dans son attribut children.

6. Route guard
   Route guard est une fonction très importante dans Vue Router. Il peut effectuer certaines opérations avant et après le saut d'itinéraire, comme vérifier si l'utilisateur est connecté, contrôler les autorisations, etc. Vue Router fournit trois niveaux de gardes : gardes globales, gardes exclusives à la route et gardes intra-composants. L'exemple de code est le suivant :

   router.beforeEach((to, from, next) => {
     // 在跳转前执行的逻辑
     next()
   })
   
   router.afterEach(() => {
     // 在跳转后执行的逻辑
   })

   Copier après la connexion

   Dans le code ci-dessus, nous utilisons les méthodes beforeEach et afterEach pour définir respectivement la garde avant et la garde globales.

Résumé :
Cet article présente comment utiliser Vue Router pour la gestion des itinéraires et le contrôle de la navigation, et fournit quelques exemples de code. Dans le développement réel, l'utilisation rationnelle de Vue Router peut améliorer l'efficacité du développement front-end et rendre la structure du code plus claire et maintenable. J'espère que cet article pourra aider les lecteurs à comprendre l'utilisation de Vue Router.

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!