Comment utiliser les fonctions de routage dans la documentation Vue

Vue est un framework JavaScript populaire qui utilise un certain nombre de technologies et de concepts frontaux, notamment des composants, la gestion d'état et des capacités de routage. Pour une application SPA (Single Page Application), le routage est une partie très importante. Vue Router fournit un moyen simple de gérer le routage des applications, ce qui nous permet de définir des routes et leurs composants correspondants dans l'application. Cet article explique comment utiliser les fonctions de routage dans les documents Vue.

Installer Vue Router

Avant de commencer à utiliser Vue Router, nous devons l'installer. Installez Vue Router via npm :

$ npm install vue-router

Structure de base de Vue Router

Dans Vue, une route est la correspondance entre une adresse URL et un composant. Voici la structure de base de Vue Router :

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

En utilisant le constructeur officiellement fourni VueRouter, nous pouvons créer une nouvelle instance de routage. Dans cet exemple, nous définissons des modèles de routage et des règles de routage. Il existe deux modes de routage, l'un est le mode hachage et l'autre est le mode historique. Ici, nous choisissons le mode historique. Les règles de routage sont divisées en plusieurs itinéraires, chaque itinéraire a un chemin (chemin), un nom (nom) et un composant correspondant (composant).

Méthode de rendu du routage

Pour utiliser le routage dans une application Vue, nous devons d'abord configurer un composant de vue de routeur pour héberger la partie correspondante du routage. Sur la base de la correspondance de chemin entre l'emplacement du composant et les règles de routage, Vue restituera automatiquement le composant correct à l'emplacement correspondant. Comme indiqué ci-dessous :

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

Dans cet exemple, le composant de routage sera affiché à l'intérieur du composant router-view.

Utiliser des paramètres dynamiques

Parfois, nous devons utiliser des paramètres dynamiques dans le routage. Par exemple, dans une application de blog, nous devons obtenir le contenu de l'article par ID d'article. Dans le backend, l'URL aura un paramètre d'ID d'article dynamique, tel que "/blog/123", où 123 est l'ID de l'article. Dans Vue, nous pouvons utiliser des règles de routage pour définir des paramètres dynamiques :

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/blog/:id',
      name: 'blog',
      component: Blog
    }
  ]
})

Dans cet exemple, nous définissons une règle de routage avec des paramètres dynamiques. Les paramètres commencent par deux points, par exemple ":id". Lorsque "/blog/123" correspond, "123" sera un paramètre dynamique. En même temps, il est également très simple d'utiliser ce paramètre dans le composant :

export default {
  data () {
    return {
      postId: null
    }
  },
  created () {
    this.postId = this.$route.params.id
    // 根据post id获取文章
  }
}

Dans l'instance du composant, les paramètres peuvent être obtenus via this.$route.params.id.

Navigation Programmatique

Au début du chapitre, nous avons créé une instance de Vue Router. En utilisant cet exemple, nous pouvons implémenter la commutation de routage par programme. Vue Router fournit deux méthodes pour implémenter la navigation par programmation : $router.push() et $router.replace().

Dans l'exemple ci-dessus, il y a deux boutons de routage, et ils sont connectés à des itinéraires différents. En acheminant l'événement click du bouton, nous pouvons utiliser $router.push() dans le JavaScript sous-jacent pour naviguer vers un itinéraire spécifique : à ce stade, nous devrons peut-être effectuer certaines opérations, telles que l'autorisation, le chargement de données, etc. Vue Router fournit des gardes de navigation pour résoudre ce problème. Les gardes de navigation sont un ensemble de fonctions qui peuvent être exécutées lorsqu'un itinéraire est parcouru, par exemple avant, après ou lors de la saisie d'un itinéraire. Vue Router propose trois types de gardes de navigation : la garde globale, la garde de composants et la garde de routage.

Global Guard

Global Guard est une Garde définie dans toute l'application et prend effet sur toutes les pages. Vue Router fournit des gardes globales, notamment :

beforeEach(to, from, next) : exécuté avant d'entrer dans l'itinéraire.

afterEach(to, from) : exécuté après l'entrée de l'itinéraire.

• Component Guard
• Component Guard est un Guard défini au sein d'un composant et est exécuté lors de la saisie du composant. Vue Router fournit le composant Guard suivant :

beforeRouteEnter(to, from, next) : exécuté avant d'entrer dans le composant, l'instance du composant n'est pas accessible.

beforeRouteUpdate(to, from, next) : exécuté lorsque la route est mise à jour et peut accéder à l'instance du composant.

• beforeRouteLeave(to, from, next) : Exécuté en quittant le composant, vous pouvez accéder à l'instance du composant.
• Routing Guard
• Routing Guard est une garde définie lorsque l'itinéraire est défini et prend effet dans un itinéraire spécifique. Vue Router fournit le garde de routage suivant :

beforeEnter(to, from, next) : exécuté avant d'entrer dans la route, il ne prend effet que dans cette route.

beforeResolve(to, from, next) : Exécuté à l'entrée de la route, vous pouvez accéder à l'instance du composant.

• Summary
• Le routage est une partie très importante des applications Vue, et Vue Router nous offre un moyen simple de gérer le routage. Dans cet article, nous avons présenté la structure de base, la méthode de rendu, les paramètres dynamiques, la navigation programmatique et les gardes de navigation de Vue Router. Vue Router est une bibliothèque de routage puissante et facile à utiliser Si vous souhaitez étendre votre application Vue, assurez-vous de vous référer à l'API fournie dans ces documents.

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!