Comment configurer et utiliser le routage dans Vue ?

Vue est un framework JavaScript open source qui offre un moyen flexible de créer des applications Web interactives. L'une des fonctionnalités clés est le routage Vue, qui nous permet de créer des applications monopage qui gèrent différentes pages via le routeur.

Cet article présentera en détail comment configurer et utiliser le routage dans Vue, vous permettant de mieux contrôler la navigation dans les pages de votre application.

1. Concepts de base du routage Vue

Avant de comprendre la configuration et l'utilisation du routage Vue, nous devons comprendre quelques concepts de base. Vue routage est développé sur la base de la bibliothèque Vue Router, parmi lesquelles :

1 Routage : Le routage est la page correspondant aux différentes URL du site Web spécifié. Dans Vue, vous pouvez implémenter la navigation dans les pages du site Web en créant des instances de routage.

2. Routeur : Le routeur est l'instance chargée de gérer tout le routage dans l'application. La bibliothèque Vue Router fournit un objet VueRouter pour générer des instances de routeur.

3. Chemin et paramètres : Le chemin et les paramètres sont les deux paramètres permettant de spécifier l'itinéraire. Le chemin est la chaîne spécifiée dans l'URL pour correspondre exactement à l'itinéraire. Les paramètres sont des parties variables de l'URL de la route et sont accessibles dans le composant de la route.

2. Configurer le routage Vue

La configuration du routage Vue doit être effectuée dans une instance Vue. Vous devez d'abord installer la bibliothèque Vue Router, puis ajouter l'objet VueRouter à l'instance Vue.

1. Installer Vue Router

Pour utiliser Vue Router, vous devez ajouter la bibliothèque Vue Router à votre projet :

npm install vue-router --save

2. Créer un composant de routage

Dans Vue, une route peut être un composant. Par conséquent, avant de créer un itinéraire, vous devez créer le composant de routage correspondant. Dans l'exemple suivant, nous allons créer deux composants : Accueil et À propos.

// Home.vue
<template>
  <div>
    <h2>Home</h2>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

// About.vue
<template>
  <div>
    <h2>About</h2>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

3. Créer une instance de routage

Les étapes pour créer une instance de Vue Router sont les suivantes :

1) Présentez la bibliothèque Vue Router. Ajoutez le code suivant dans le fichier main.js :

import VueRouter from 'vue-router';

2) Définissez l'itinéraire. Ajoutez le code suivant dans le fichier main.js :

import Home from './components/Home.vue';
import About from './components/About.vue';

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

3) Créez une instance de Vue Router. Ajoutez le code suivant dans le fichier main.js :

const router = new VueRouter({
  routes
});

4) Ajoutez l'instance Vue Router à l'instance Vue. Ajoutez le code suivant dans le fichier main.js :

new Vue({
  router
}).$mount('#app');

Maintenant, vous avez créé l'instance Vue Router et l'avez ajoutée à l'instance Vue. Ensuite, vous devez ajouter des liens dans votre modèle Vue qui peuvent être utilisés pour la navigation.

3. Utilisez le routage Vue dans les modèles

Maintenant que vous avez configuré le routage Vue, vous pouvez l'utiliser dans les modèles Vue. Dans les modèles Vue, vous pouvez utiliser la balise

Par exemple, dans l'exemple suivant, nous utiliserons la balise pour naviguer entre le composant Home et le composant About :

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

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

Dans le code ci-dessus, la balise rendu sous forme de lien et, lorsqu'il est cliqué, dirige l'utilisateur vers le composant de routage correspondant. La balise est utilisée pour afficher les composants qui correspondent à l'itinéraire actuel.

4. Paramètres de routage Vue et routage imbriqué

Le routage Vue peut non seulement accepter des chemins de base, mais également des paramètres et un routage imbriqué.

1. Paramètres de routage

Dans Vue, vous pouvez utiliser les paramètres de routage pour spécifier le chemin des pièces dynamiques. Par exemple, dans l'exemple suivant, nous utiliserons deux points (:) pour spécifier un paramètre d'ID dynamique :

// router.js
{
  path: '/user/:id',
  component: User
}

// User.vue
export default {
  data() {
    return {
      userId: this.$route.params.id
    };
  }
}

Dans le code ci-dessus, nous spécifions la route comme /user/:id, où :id est le paramètre dynamique. Lorsqu'un utilisateur accède à l'URL /user/123, le paramètre 123 peut être obtenu en utilisant this.$route.params.id dans le composant User.

2. Routage imbriqué

Le routage Vue prend également en charge le routage imbriqué. Par exemple, dans l'exemple suivant, nous utiliserons l'option children pour spécifier une route imbriquée :

{
  path: '/user',
  component: User,
  children: [
    {
      path: '',
      component: UserHome
    },
    {
      path: 'profile',
      component: UserProfile
    },
    {
      path: 'posts',
      component: UserPosts
    }
  ]
}

Dans le code ci-dessus, nous spécifions la route comme /user et spécifions deux routes enfants : /user/profile et /user/ posts . Ces sous-itinéraires peuvent être rendus à l'aide de la balise

5. Résumé

Le routage Vue est un moyen flexible de gérer la navigation dans les pages d'une application. Nous pouvons utiliser la balise dans le modèle Vue pour créer des liens pour la navigation, et utiliser la balise pour afficher les composants qui correspondent à l'itinéraire actuel.

Il existe d'autres concepts clés dans le routage Vue tels que les paramètres d'itinéraire et les itinéraires imbriqués. Ces concepts vous offrent un meilleur contrôle et une meilleure gestion de la navigation dans les pages de votre application.

J'espère que cet article pourra vous aider à apprendre et à comprendre la configuration et l'utilisation du routage Vue, et à être capable de les appliquer de manière flexible dans le développement réel.

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!