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.
Avant de commencer à utiliser Vue Router, nous devons l'installer. Installez Vue Router via npm :
$ npm install 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).
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.
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.
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 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.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!