Une explication détaillée : utiliser Vue Router dans Vue3

Vue Router est un gestionnaire de routage officiel de Vue.js, qui est profondément intégré au noyau de Vue.js, grâce auquel il peut facilement fournir des fonctions de gestion de routage et de navigation pour les applications à page unique (SPA). Aujourd'hui, nous allons parler des choses qui utilisent Vue Router dans Vue 3.

Installer et configurer Vue Router

Installer le routeur Vue

Pour installer Vue Router, il vous suffit d'ouvrir le terminal dans le projet vue et d'entrer la commande suivante pour installer :

npm façon d'installer

npm install vue-router@4

pose de fil

yarn add vue-router@4

Configurer Vue Router

Afin de faciliter la maintenance et la gestion de notre code ultérieur, nous plaçons généralement le code lié au routage dans un dossier. Ainsi, les étapes pour configurer Vue Router sont les suivantes :

1. Créez un nouveau dossier de routeur dans le dossier src et créez un nouveau fichier index.js sous ce dossier
2. Introduisez les méthodes createRouter et createWebHashHistory dans vue-router dans index.js, et introduisez le fichier de page

import {
    
     createRouter,createWebHashHistory } from "vue-router";
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import List from '../views/List.vue'
import Detail from '../views/Detail.vue'

3. Définissez un tableau de routes dans index.js et définissez-y les règles de routage

const routes = [
  {
    
    
    path:'/home',
    name:Home,
    component:Home
  },
  {
    
    
    path:'/about',
    component:About
  },
  {
    
    
    path:'/list',
    component:List
  },
  {
    
    
    path:'/detail',
    component:Detail
  },
  {
    
    
    path:'/',
    redirect:'/home'
  }
]

4. Utilisez createRouter dans index.js pour créer une instance de routage et configurer le mode de routage et les règles de routage définies ci-dessus

const router = createRouter({
    
    
  history:createWebHashHistory(),
  routes
})

5. À la fin de index.js, utilisez export default pour exporter l'instance de routage créée ci-dessus

export default router

6. Enregistrez le routage : importez le fichier de routage créé ci-dessus dans main.js et utilisez app.use pour enregistrer le routage.

import router from './router'
const app = createApp(App)
app.use(router) //注册路由
app.mount('#app')

7. Utiliser des composants de routage dans les composants
   Utiliser des composants dans App.vue <router-view>pour rendre les composants à afficher et utiliser <router-link>des composants dans les composants Tabbar pour générer des liens

Code dans le composant App.vue

<template>
  <Title></Title>
  <router-view></router-view>
  <Tabbar></Tabbar>
</template>
<script setup>
import Tabbar from './components/Tabbar.vue'; 
import Title from './components/Title.vue'; 

</script>
<style scoped>
</style>

Code dans le composant Tabbar

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/list">List</router-link>
    <router-link to="/about">About</router-link>
  </div>
  
</template>
<script setup>
</script>
<style  scoped>
div {
    
    
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
</style>

Jusqu'à présent, nous avons terminé la configuration et la construction du routage, exécuté le programme, actualisé le navigateur, nous pouvons voir que la page peut sauter normalement et la fonction de routage est réalisée.

Bien que nous ayons implémenté une scène de routage complète ci-dessus, nous devons encore avoir une compréhension approfondie des bases de Vue Router, afin de mieux comprendre et utiliser Vue Router. Ce qui suit présente quelques concepts de base dans Vue Router.

Le concept de base de Vue Router

1. Routeur : Vue Router fournit un routeur pour gérer les routes dans votre application. Vue Router instancie un objet Vue Router, enregistre les règles de routage et connecte d'autres composants autour de lui.

2. Routes : les routes sont des adresses URL qui sont distribuées à différents composants. Dans Vue Router, les routes sont généralement définies par des règles de chemin et des composants correspondants. Lorsque l'URL du navigateur correspond au chemin de routage, le composant correspondant sera chargé dans la page. Les informations de routage peuvent être obtenues à partir de l'objet route.

3. Règles de routage : les règles de routage sont composées d'attributs tels que le chemin, le composant, le nom, la méta et les accessoires. Parmi eux, path représente le chemin de l'URL, component représente le composant à restituer, name représente le nom de la route, meta représente les métadonnées de la route et props représente les données des accessoires de la route. Les règles de routage peuvent être enregistrées dans Vue Router.

4. Protection de la navigation : la protection de la navigation est une fonction de crochet exécutée lorsque l'itinéraire saute, utilisée pour contrôler les droits d'accès de l'itinéraire, gérer la logique avant et après le saut d'itinéraire, etc. Dans Vue Router, pour l'API facultative, les protections de navigation couramment utilisées incluent beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave, etc. ; pour ceux qui utilisent une combinaison API et fonction de configuration pour écrire des composants, vous pouvez ajouter des protections de mise à jour et de congé via onBeforeRouteUpdate et onBeforeRouteLeave respectivement.

Introduction aux éléments de configuration de Vue Router

Lorsque nous utilisons createRouter dans Vue Router pour créer un objet routeur, il nous fournit de nombreux éléments de configuration. L'exemple de code avec les éléments de configuration complets est le suivant :

const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes: [],
  scrollBehavior: () => ({
    
     top: 0, left: 0 }),
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
  parseQuery: null,
  stringifyQuery: null,
  fallback: true
})

La signification de chaque élément de configuration dans le code ci-dessus est la suivante :

1. history: Le mode historique de l'itinéraire spécifié, prend actuellement en charge createWebHistory()et createWebHashHistory()le mode.

2. routes: Définit un tableau de règles de routage, chaque règle de routage est un objet, comprenant des attributs tels que path, et .namecomponentmeta

3. scrollBehavior: Une fonction de configuration qui spécifie le comportement de défilement lorsque le routage est commuté. Cette fonction renvoie xun yobjet contenant des propriétés et , indiquant la position de défilement après le saut de page.

4. linkActiveClass: Spécifiez le nom de classe du lien dans l'état actif, la valeur par défaut est 'router-link-active'.

5. linkExactActiveClass: spécifie le nom de classe du lien qui correspond à l'état d'activation exact, par défaut 'router-link-exact-active'.

6. parseQueryet stringifyQuery: Fonctions d'analyse des paramètres de requête et de sérialisation pour la configuration des routes. Normalement, nous n'avons pas besoin de configurer ces deux fonctions en plus, car Vue Router fournit déjà des implémentations par défaut.

7. fallback: Il est utilisé pour configurer s'il faut activer le mécanisme de repli du mode Historique HTML5. La valeur par défaut est true, ce qui signifie que lorsque l'itinéraire ne correspond pas, il reviendra automatiquement à l'itinéraire précédent dans l'historique.

Dans les éléments de configuration ci-dessus, nous n'avons généralement besoin que de configurer les deux options d'historique et d'itinéraires, et d'autres options peuvent être comprises

Introduction aux éléments de configuration dans les routes

Dans Vue Router, les règles de routage sont configurées via routesdes attributs . routesLes configurations couramment utilisées dans les propriétés sont les suivantes :

1. name: Le nom de la règle de routage. Peut être utilisé pour la navigation par programmation et les sauts de routage à l'intérieur des composants.

2. path: Le chemin de la route, qui peut contenir des paramètres dynamiques et des expressions régulières. Par exemple, /user/:idreprésentant la page utilisateur, :idest un paramètre dynamique.

3. redirect: La règle de redirection pour l'itinéraire. Par exemple, { path: '/', redirect: '/home' }une redirection représentant le chemin racine d'une route.

4. component: Le composant correspondant à la route. Il peut s'agir d'une classe de composant normale ou d'un composant chargé de manière asynchrone.

5. children: L'itinéraire enfant de l'itinéraire actuel. Il peut s'agir d'un tableau de règles de routage ou d'une fonction permettant de générer dynamiquement des règles de routage.

6. meta: Les méta-informations de l'itinéraire, qui sont utilisées pour décrire certaines informations supplémentaires de l'itinéraire. Par exemple, si la route nécessite une connexion, une authentification d'autorisation, etc.

7. components: plusieurs composants de vue nommés correspondant à la route.

Saut de routage

Avec Vue Router, nous pouvons naviguer vers les routes de deux manières, via router-linkla méthode du composant et router.pushpar programmation à l'aide de fonctions.

utiliser router-linkle composant

En utilisant router-linkdes composants pour réaliser des sauts de routage, nous avons seulement besoin d'envelopper le bouton de menu router-linkavec des composants et d'utiliser la méthode to dessus pour sauter, l'exemple de code est le suivant :

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

utiliser router.pushla fonction

Utilisez router.pushdes fonctions pour implémenter des sauts de routage par programmation. Il suffit de lier l'événement click sur le bouton normal et d'appeler la méthode dans l'événement router.push()pour réaliser le saut. L'exemple de code est le suivant :

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/list">List</router-link>
    <router-link to="/about">About</router-link>
    <button @click="gotoAbout"> 关于 </button>
  </div>
  
</template>
<script setup>
import {
    
     useRouter } from 'vue-router'
const router = useRouter()
const gotoAbout = () => {
    
    
  router.push('/about')
}
</script>

L'utilisation router.pushde la méthode ajoutera un nouvel enregistrement à la pile d'historique. Ainsi, lorsque l'utilisateur cliquera sur le bouton de retour du navigateur, il reviendra à l'URL précédente.

En fait, <router-link>lorsque , Vue Router appellera cette méthode en interne, donc cliquer <router-link :to="..."> équivaut à appelerrouter.push(...)

router.push()Le paramètre de la méthode peut être un chemin de chaîne ou un objet décrivant l'adresse.

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({
    
     path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({
    
     name: 'user', params: {
    
     username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({
    
     path: '/register', query: {
    
     plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({
    
     path: '/about', hash: '#team' })

Paramètres de routage

Dans Vue Router, les paramètres de routage peuvent être passés et obtenus des manières suivantes

1. Passer les paramètres via le chemin de routage : utilisez Dynamic Route Matching dans la configuration du routage, par exemple :

const routes= [
    {
    
    
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]

Utilisez deux-points dans le chemin de routage pour représenter les paramètres, et les valeurs des paramètres seront placées dans route.paramsl'objet. route.paramsNous pouvons obtenir des paramètres en appelant , si l'adresse d'accès est /detail/123, alors nous pouvons obtenir la valeur "123" via route.params.id.

2. Transmettez les paramètres via les paramètres de requête : utilisez les paramètres de requête lors du routage des sauts, par exemple :

// 在组件中跳转
router.push({
    
    
  path: '/detail',
  query: {
    
     id: 123 }
})

// 在模板中跳转
<router-link to="/detail?id=123">Detail</router-link>

Lors de l'utilisation du paramètre de requête dans la route, la valeur du paramètre sera placée route.querydans l'objet. Nous pouvons obtenir des paramètres via route.query. Par exemple, si l'adresse d'accès est /detail?id=123, nous pouvons obtenir la valeur "123" via route.query.id.

3. Les paramètres sont transmis via l'option props dans la configuration de routage. Par exemple:

const routes= [
    {
    
    
      path: '/detail/:id',
      name: 'Detail',
      component: Detail,
      props: {
    
     id: 123 }
    }
  ]

Les composants peuvent utiliser directement des accessoires pour recevoir des paramètres

4. Les paramètres sont transmis via des options méta dans la configuration de la route. Par exemple:

const routes= [
    {
    
    
      path: '/detail/:id',
      name: 'Detail',
      component: Detail,
      meta: {
    
     id: 123 }
    }
  ]

Les paramètres peuvent être obtenus via route.meta dans les composants,

routage dynamique

Une route dynamique est une route qui utilise une partie d'une route comme paramètre. Par exemple, si nous voulons créer une page distincte pour chaque utilisateur, nous pouvons utiliser le routage dynamique, en créant une route avec un chemin /users/:userIdoù :userIdest un paramètre.

Le routage dynamique utilise deux points ( ) pour représenter les paramètres lors de la définition des routes :. La définition de routes dynamiques nécessite l'utilisation de pathdéfinitions de méthodes. Par exemple, pour définir une route dynamique, on peut écrire :

{
    
    
  path: '/users/:userId',
  name: 'user',
  component: User
}

Dans le code ci-dessus, le dans le chemin :userIdreprésente un paramètre, qui peut paramsêtre obtenu à partir des propriétés de l'objet route. Dans le composant, il peut être lu comme ceci userId:

console.log(route.params.userId)

Lors de l'utilisation du routage dynamique, Vue Router prend également en charge les paramètres facultatifs et les expressions régulières pour définir les routes. Par exemple, vous pouvez définir une route dynamique avec des paramètres optionnels comme ceci :

{
    
    
  path: '/users/:userId/:postId?',
  name: 'post',
  component: Post
}

Dans le code ci-dessus, postIdles paramètres du chemin sont facultatifs et nous ajoutons un point d'interrogation après celui-ci pour représenter les paramètres facultatifs. Maintenant, si le chemin est /users/123, alors postIdce sera undefined; si le chemin est /users/123/456, alors postIdce sera 456.

itinéraires imbriqués

Les routes imbriquées nous permettent d'imbriquer plusieurs sous-routes sous une route parente pour former une structure de page plus complexe.

routesPour définir une route imbriquée, on peut définir un tableau d'objets de sous-routage dans le tableau de la route parent Chaque objet de sous-routage contient une pathet une componentpropriété, indiquant le chemin d'accès du sous-routage courant et le composant correspondant. Dans le même temps, nous pouvons également définir des sous-routes de sous-routes dans l'objet de sous-routage, formant ainsi une structure de routage imbriquée.

Nous utilisons des éléments de configuration childrenpour représenter la relation d'imbrication des routes, comme illustré dans l'exemple de code suivant :

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

Dans le code ci-dessus, nous avons défini un Homecomposant nommé comme composant de la route parente et childrendéfini deux routes enfants dans le tableau : Aboutet Contact. De cette façon, lorsque l'utilisateur visite /aboutou /contact, Vue Router affichera le sous-composant correspondant et l'imbriquera dans Homele composant.

itinéraire nommé

Les itinéraires nommés peuvent définir un nom pour l'itinéraire afin qu'il puisse être référencé et sauté dans le code. L'utilisation de routes nommées peut rendre le code plus clair et plus facile à comprendre, en particulier si vous devez accéder à une route avec des paramètres dynamiques.

Pour définir une route nommée, nous pouvons utiliser un attribut dans l'objet route namepour spécifier le nom de la route, par exemple :

const routes = [
    {
    
    
      path: '/',
      name: 'home',
      component: Home
    },
    {
    
    
      path: '/about',
      name: 'about',
      component: About
    },
    {
    
    
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]

Dans le code ci-dessus, nous avons spécifié des noms pour les trois routes : home, aboutet user. Ensuite, dans le code, nous pouvons utiliser ces noms pour générer des liens de routage ou des sauts de routage correspondants, par exemple :

<router-link :to="{name: 'home'}">Home</router-link>

<router-link :to="{name: 'about'}">About</router-link>

<router-link :to="{name: 'user', params: {id: '123'}}">User 123</router-link>

router.push({
    
    name: 'home'})

router.push({
    
    name: 'user', params: {
    
    id: '456'}})

Dans le code ci-dessus, nous avons utilisé respectivement <router-link>le composant et la méthode pour accéder à la route avec la route nommée. router.push()Parmi eux, l'utilisation d' paramsattributs permet de spécifier dynamiquement les paramètres de la route.

Les routes nommées sont pratiques dans les situations où les paramètres doivent être transmis dynamiquement.

garde d'itinéraire

Un garde de route est une fonction qui est appelée à chaque étape de la route et peut être utilisée pour intercepter l'accès à la route ou effectuer certaines opérations sur la route. Nous pouvons utiliser des gardes de route pour contrôler la redirection et les droits d'accès des routes.

Dans les gardes de routage, nous utilisons généralement trois paramètres : to, fromet next.

• to: indique l'objet de routage cible à rediriger, y compris le chemin de routage, les paramètres, la chaîne de requête et d'autres informations.

• from: Indique l'objet de routage courant, c'est-à-dire l'objet de routage qui part.

• next: Il s'agit d'une fonction de contrôle de routage et de saut. Lorsque la fonction est appelée next, le routage continue vers le bas. Nous pouvons nextcontrôler le comportement du routage via des fonctions, telles que le rendu des composants, le saut vers le routage, l'annulation d'opérations, etc.

Plusieurs nextcas d'utilisation de fonctions

• next(): signifie continuer à exécuter la garde de routage suivante.

• next(false): Indique d'annuler le saut de routage en cours.

• next('/path'): Indique un saut vers le chemin de routage spécifié.

• next(error): Indique qu'une erreur s'est produite lors du saut de routage, telle que des autorisations insuffisantes.

Il convient de noter que lors de l'utilisation de gardes de route, nous devons appeler explicitement nextla fonction pour contrôler le saut et la fonction de la route, sinon la route ne continuera pas à s'exécuter vers le bas. Dans différents gardes, nextle comportement et la fonction de la fonction seront également différents, et il doit être appelé en fonction de la scène spécifique.

Les gardes de routage dans Vue Router sont divisés en gardes de routage globales et en gardes exclusives de routage :

Garde de route globale

La protection globale du routage est une protection qui prend effet dans toute l'application et peut être utilisée pour intercepter toutes les opérations de routage. Dans Vue Router@4, il y a trois gardes globales : beforeEach, beforeResolveet afterEach.

• beforeEach: Exécuté avant les sauts de routage, il peut être utilisé pour le contrôle d'accès global ou les sauts de redirection et d'autres opérations.

• beforeResolve: Exécuté avant la fin du saut de routage, il peut être utilisé pour attendre le chargement du composant de routage asynchrone ou effectuer certaines opérations avant le saut de routage.

• afterEach: Exécuté une fois le saut de routage terminé, il peut être utilisé pour effectuer certaines opérations sur la page, comme surveiller le point enterré de la page ou modifier le titre de la page.

Un exemple de code d'un routage de garde qui vérifie si un utilisateur est connecté est le suivant

router.beforeEach((to, from, next) => {
    
    
  if (to.name !== 'Login' && !isAuthenticated) next({
    
     name: 'Login' })
  else next()
})

Dans le code ci-dessus, si l'utilisateur n'est pas connecté, la page saute à la page de connexion, et si l'utilisateur est déjà connecté, le saut next() est exécuté

Garde exclusive de routage

La protection exclusive d'itinéraire ne prend effet que sur l'itinéraire actuel et peut être utilisée pour restreindre ou améliorer les droits d'accès d'un certain itinéraire. Dans Vue Router@4, il existe deux gardes exclusifs de routage : beforeEnteret leaveGuard.

• beforeEnter: Exécuté avant d'entrer dans la route actuelle, il peut être utilisé pour améliorer les droits d'accès de la route actuelle ou effectuer des opérations connexes.

• leaveGuard: Exécuté avant de quitter la route en cours, il peut être utilisé pour interroger l'utilisateur ou effectuer des opérations connexes.

Lors de l'utilisation de gardes de route, nous pouvons createRouterles enregistrer dans des fonctions, par exemple :

const routes=[
    {
    
    
      path: '/',
      component: Home
    },
    {
    
    
      path: '/about',
      component: About,
      beforeEnter: (to, from, next) => {
    
    
        // 进行路由访问控制或相关操作
      }
    }
  ]

Chargement différé du routage

Le chargement différé du routage est un moyen de charger les composants de routage de manière asynchrone à la demande. Ce n'est que lorsque le composant correspondant de la route doit être utilisé que le code correspondant au composant sera chargé dynamiquement. L'utilisation du chargement paresseux de route peut optimiser les performances de l'application

En utilisant le chargement paresseux de route dans Vue Router, nous pouvons l'implémenter de deux manières : en utilisant import()et dynamiqueimport()

Utilisez import() pour implémenter le chargement paresseux

const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')
const routes = [
	{
    
    
      path: '/',
      component: Home
    },
    {
    
    
      path: '/about',
      component: About
    }
 ]
const router = createRouter({
    
    
  history: createWebHistory(),
  routes
})

Utilisez l'importation dynamique () pour implémenter le chargement paresseux

const routes = [
    {
    
    
      path: '/',
      component: () => import('./views/Home.vue')
    },
    {
    
    
      path: '/about',
      component: () => import('./views/About.vue')
    }
]
const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes
})

Remarques sur l'utilisation de Vue Router

1. Les paramètres dynamiques ne peuvent pas avoir de barre oblique : lorsque vous utilisez des paramètres dynamiques, veuillez noter que l'URL ne peut pas être la même que les paramètres dynamiques.

2. Processus de navigation : le routage est similaire à une pile, et chaque saut de routage sera enregistré par l'historique dans l'historique. Si vous sautez sur le même itinéraire, les dernières fois de l'historique seront ignorées. Par défaut, la nouvelle route redirigée ne déclenchera pas le processus de mise à jour de la route, vous devez utiliser explicitement la méthode router.pushou router.replacepour mettre à jour la route actuelle.

3. La navigation est annulée : si vous effectuez une opération asynchrone dans beforeRouteLeaveou guard, vous devez vous assurer que l'opération asynchrone est terminée et appelée pour vous assurer que la navigation peut continuer.beforeRouteUpdatenext(true)

OK, c'est la fin de la discussion sur l'utilisation de Vue Router dans vue3. Si vous avez des questions, veuillez laisser un message dans la zone de commentaire. Si vous l'aimez, veuillez aimer, suivre et ajouter aux favoris ! !