Comment faire du routage dans vue

Vue.js est un framework frontal populaire pour créer des applications Web d'une seule page. Vue fournit de nombreux outils et plugins pratiques, dont Vue Router pour gérer le routage de votre application. Cet article explique comment utiliser Vue Router pour créer un système de routage de base.

1. Installer Vue Router

Pour utiliser Vue Router, vous devez d'abord l'installer. Vous pouvez utiliser npm ou Yarn pour l'installer.

Utilisez npm:

npm install vue-router 

Utilisez fil:

yarn add vue-router 

Une fois l'installation terminée, nous devons présenter Vue Router.

import VueRouter from 'vue-router';

2. Créer une instance de Vue Router

Après avoir installé Vue Router, nous devons créer une instance de Vue Router, qui instanciera Vue Router et définira les routes. Dans Vue.js, les composants sont généralement créés et gérés à l'aide d'instances Vue. Avant de créer une instance Vue Router, assurez-vous d'abord de créer une instance Vue.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    // 路由信息定义
  ]
});

Dans le code ci-dessus, nous créons une instance de routeur et définissons les informations de routage du site Web dans l'option routes. Dans Vue Router, les informations de routage consistent en un ensemble d'objets de routage. Chaque objet route définit le chemin de la route et le composant de page correspondant à la route.

3. Créer une table de routage

L'attribut routes défini dans l'instance de routeur est utilisé pour stocker les informations de routage pour l'ensemble de l'application. Dans cet attribut, nous définissons une règle de routage, spécifiant un chemin URL et le composant de vue correspondant.

import HomePage from '@/components/HomePage.vue';
import AboutPage from '@/components/AboutPage.vue';

const routes = [
  {
    path: '/',
    component: HomePage
  },
  {
    path: '/about',
    component: AboutPage
  }
];

Dans le code ci-dessus, nous définissons deux règles de routage : / et /about, qui sont respectivement mappées aux composants HomePage et AboutPage.

4. Enregistrer la table de routage

En appelant la méthode d'instanciation de Vue Router, nous pouvons enregistrer la table de routage dans l'application Vue. Ceci peut être réalisé en appelant la méthode Vue.use() sur l'instance de Vue Router.

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: 'history'
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

Dans le code ci-dessus, nous enregistrons le Vue Router sur l'instance Vue et l'instancions. Ensuite, nous transmettons l'instance Vue Router à l'instance racine de Vue.

5. Créer des liens de routage

Dans Vue Router, nous pouvons utiliser le composant de lien de route (router-link) pour implémenter la navigation dans les pages. Le composant routeur-lien génère en fait une balise a et lie automatiquement les informations de routage.

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

Dans le code ci-dessus, nous avons utilisé deux composants de lien de routeur pour naviguer vers la page d'accueil et la page À propos. La balise router-link doit être enveloppée dans l’élément qui doit être lié.

6. Créer une vue d'itinéraire

Vue Router fournit un composant appelé router-view pour le rendu des vues basées sur l'itinéraire actuel.

<router-view/>

Dans le code ci-dessus, nous avons utilisé une balise router-view pour afficher le composant correspondant de l'URL actuelle à l'emplacement approprié.

7. Gestion des événements d'itinéraire

Dans Vue Router, nous pouvons gérer les événements lorsque la navigation d'itinéraire se déclenche. Cela peut être fait en écoutant les événements sur l'instance de Vue Router.

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  // 在路由开始跳转前，进行路由守卫
});

router.afterEach(() => {
  // 跳转完成后
});

Dans le code ci-dessus, nous avons utilisé les méthodes beforeEach() et afterEach() pour écouter les événements de routage. Dans la méthode beforeEach(), nous pouvons effectuer des gardes de routage, telles que demander une connexion utilisateur ou vérifier les autorisations de l'utilisateur. Dans la méthode afterEach(), nous pouvons effectuer des opérations après le saut de page.

Résumé

Cet article explique comment utiliser Vue Router pour créer des routes dans une application Vue.js. Nous avons installé Vue Router, créé une instance de Vue Router et défini la table de routage. Nous avons également expliqué comment créer des liens de route et des vues de route dans une application Vue.js, et comment gérer les événements de route. En utilisant Vue Router, nous pouvons facilement créer une application Web complète d'une seule page.

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!