Un article présentant les étapes d'utilisation de Vue Router

Avec le développement continu de la technologie front-end, de plus en plus d'applications commencent désormais à adopter la méthode de développement Single Page Application (SPA). En tant que l'un des outils importants pour le développement front-end, Vue.js est devenu l'un des frameworks préférés de plus en plus de développeurs. Et lorsque nous utilisons Vue.js pour créer une application d'une seule page, Vue Router voit le jour.

Vue Router est le gestionnaire de routage officiel de Vue.js. Il nous permet de définir des règles de routage d'application grâce à une configuration simple et de mapper ces règles à des composants pour obtenir des effets de saut de page dans les applications d'une seule page. Dans cet article, nous présenterons les étapes d'utilisation de Vue Router.

Étape 1 : Installation

Pour utiliser Vue Router, vous devez d'abord l'installer dans le projet. Vous pouvez l'installer via npm ou Yarn :

npm install vue-router --save

ou

yarn add vue-router

Étape 2 : Créer une instance de routage

La partie essentielle de Vue Router est de créer une instance de routage. Nous créons généralement cette instance dans le fichier de configuration de routage router.js (ou autre nom). Tout d'abord, nous devons introduire Vue et Vue Router :

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Ensuite, nous devons définir des règles de routage :

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

où routes est un tableau contenant des règles de routage. Chaque règle de routage est un objet contenant deux attributs : chemin et composant. Parmi eux, path représente le chemin de l'URL, et composant est le composant correspondant au chemin.

Enfin, nous devons créer une instance de Vue Router et y transmettre les règles de routes que nous avons définies :

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

Lors de la création de l'instance, nous pouvons configurer certaines propriétés, telles que le mode et les routes, etc., qui seront utilisées pour spécifier les paramètres liés aux itinéraires.

Étape 3 : Monter l'instance de routage sur l'instance racine

Nous utiliserons l'instance de routage (objet Vue Router) dans l'instance racine, nous devons donc monter l'instance sur l'instance racine. Par exemple :

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

Ici, nous transmettons l'instance de routage (c'est-à-dire le routeur) à notre instance racine de Vue et rendons le composant racine (c'est-à-dire l'application) sur le nœud #app de l'application.

Étape 4 : Utiliser les composants liés au routage

Lorsque nous avons créé une instance de Vue Router et l'avons montée sur l'instance racine de Vue, nous pouvons ensuite effectuer une navigation d'itinéraire entre les composants Vue.

Dans Vue Router, il y a deux composants importants : router-view et router-link. La vue routeur est utilisée pour afficher le contenu spécifique des composants de routage, tandis que le lien routeur est un lien pour la navigation entre différentes routes.

Par exemple, dans le composant racine de notre application, nous pouvons utiliser router-view pour afficher les composants correspondant aux différentes routes :

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

Ici, nous avons créé des liens de routage via la balise router-link. Lorsque vous cliquez sur le lien de routage, Vue Router met automatiquement à jour l'URL et affiche le composant de routage en vue routeur.

Étape 5 : Utiliser les fonctions de crochet de routage

Vue Router fournit également des fonctions de crochet (gardes de routage) pour gérer la logique pendant la navigation. Ces crochets de routage peuvent être utilisés globalement ou par itinéraire.

Par exemple, dans la fonction de hook de routage global beforeEach, nous pouvons implémenter la logique de vérification de connexion de l'utilisateur :

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (store.getters.isAuthenticated) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

Dans le code ci-dessus, nous utilisons le hook de routage beforeEach pour vérifier si l'utilisateur est authentifié. Si l'utilisateur a été authentifié, continuez la navigation ; sinon, redirigez l'utilisateur vers la page de connexion.

En plus du hook de routage beforeEach, Vue Router fournit également d'autres fonctions de hook utilisées dans le processus de navigation de routage. Par exemple, beforeRouteEnter est utilisé pour obtenir l'objet d'instance de composant avant de saisir une nouvelle route. beforeRouteUpdate est utilisé pour obtenir l'objet d'instance de composant lorsque le composant actuel est réutilisé. Le beforeRouteLeave est utilisé pour obtenir l'objet d'instance lorsque la navigation quitte le composant actuel.

Voici les étapes ci-dessus pour utiliser Vue Router. Vue Router fournit un ensemble très riche d'options de configuration et de fonctions de hook de routage, qui peuvent nous aider à simplifier le processus de développement et à améliorer les performances des applications 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!