Tutoriel de base VUE3 : Routage et navigation

VUE3 est actuellement l'un des frameworks de développement front-end les plus populaires, qui offre un moyen simple, flexible et efficace de créer des applications Web modernes. Le routage et la navigation sont l'une des fonctions importantes du framework VUE3. Grâce à eux, vous pouvez facilement basculer et gérer entre les pages.

Ce tutoriel présentera les concepts de base et l'utilisation du routage et de la navigation dans le framework VUE3, vous aidant à démarrer rapidement avec les fonctions de routage et de navigation de VUE3.

1. Le concept de base du routage

Le routage fait référence à la manière d'accéder à différentes pages via différentes URL. Dans VUE3, le routage est implémenté via la bibliothèque vue-router. vue-router fournit des fonctions de définition et de gestion du routage.

Avant d'utiliser vue-router, vous devez installer et présenter la bibliothèque vue-router. La méthode d'installation est la suivante :

npm install vue-router

La méthode d'introduction de la bibliothèque vue-router est la suivante :

import { createRouter, createWebHashHistory } from 'vue-router'

Parmi eux, createRouter est la méthode utilisée pour créer des routes, et createWebHashHistory spécifie l'utilisation du mode de hachage pour le routage.

Lors de la définition d'un itinéraire, vous devez définir le chemin et le composant de l'itinéraire. Path est l'URL pour accéder à la route et composant est le composant correspondant.

Par exemple :

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

Le code ci-dessus définit deux routes, l'une est le chemin racine '/', le composant correspondant est Home l'autre est '/about', le composant correspondant Le composant est À propos.

Lors de la création d'une instance de routage, vous devez transmettre les routes définies, comme indiqué ci-dessous :

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

history spécifie le mode de routage, et createWebHashHistory signifie utiliser le mode de hachage. Les autres modes incluent le mode historique et le mode abstrait. routes fait référence au tableau de configuration de routage.

2. Concept de base de la navigation

Dans VUE3, après avoir défini l'URL et les composants correspondants via le routage, vous devez implémenter la page via la navigation Switch et sautez entre.

La navigation comprend principalement deux méthodes : la navigation programmatique et la navigation déclarative.

2.1 Navigation programmatique

La navigation programmatique fait référence aux sauts et changements de page via le code JavaScript. Vue Router fournit quelques méthodes pour implémenter cette méthode de navigation.

Voici quelques méthodes couramment utilisées :

• router.push : utilisé pour accéder à la page cible et ajouter un nouvel enregistrement à l'historique de routage.

router.push('/home')

• router.replace : utilisé pour accéder à la page cible, mais n'ajoute pas de nouvel enregistrement à l'historique de routage.

router.replace('/home')

• router.go : Utilisé pour avancer ou reculer d'un nombre spécifié d'étapes dans l'historique de routage, qui peut être un nombre positif ou négatif.

router.go(-1) //后退一步

2.2 Navigation déclarative

La navigation déclarative fait référence au changement et au saut de page en le déclarant dans le modèle. Dans Vue Router, vous pouvez utiliser le composant router-link pour implémenter la navigation déclarative. Le composant

router-link peut être rendu sous la forme d'une balise a, utilisée pour accéder à la page via le lien de routage.

Par exemple :

<router-link to="/home">Home</router-link>

Le code ci-dessus signifie que le fait de cliquer sur le lien passera au chemin '/home'.

Dans le même temps, le composant router-link prend également en charge le routage avec des paramètres, par exemple :

<router-link :to="{ path: '/user/'+userId }">User</router-link>

Le code ci-dessus signifie que le rendu d'un lien passera à. Chemin '/user/ 123', où 123 est un paramètre défini par l'utilisateur.

3. Concepts avancés de routage

Dans VUE3, en plus des fonctions de base de routage et de navigation, il existe également des concepts avancés de routage, tels comme l'imbrication d'itinéraires, les itinéraires nommés, les gardes d'itinéraire, etc.

3.1 Imbrication d'itinéraires

L'imbrication d'itinéraires fait référence à la combinaison de plusieurs itinéraires ensemble pour former une relation parent-enfant. Dans VUE3, l'imbrication des routes est réalisée en définissant des sous-routes.

Par exemple :

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

Dans le code ci-dessus, une route parent nommée Layout est définie, qui contient deux sous-routes, à savoir le chemin racine '' et '/about ' . La route enfant sera affichée dans la 975b587bf85a482ea10b0a28848e78a4 de la route parent.

3.2 Routage nommé

Le routage nommé fait référence à la définition d'un nom pour l'itinéraire afin de faciliter son appel dans le programme. Dans Vue Router, le nom de la route peut être défini via l'attribut name.

Par exemple :

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

Dans le code ci-dessus, les routes des chemins racine '/' et '/about' sont respectivement nommées home et about.

Dans la navigation programmatique et la navigation déclarative, les sauts de page et les changements de page peuvent être réalisés via les noms d'itinéraire correspondants.

3.3 Route guard

Route guard fait référence au processus de saut d'itinéraire qui peut être contrôlé via certaines fonctions de crochet prédéfinies pour répondre à certains besoins spécifiques. Dans VUE3, Vue Router fournit deux types de gardes de route globaux et de gardes de route locaux.

Global route guard fait référence au contrôle unifié de toutes les routes et est généralement utilisé pour certaines opérations mondiales. Les fonctions de hook du garde de routage global incluent : beforeEach, beforeResolve et afterEach.

La garde de route locale fait référence au contrôle spécifique d'un certain itinéraire ou d'un groupe d'itinéraires, et est généralement utilisée pour certaines opérations locales. Les fonctions de hook des gardes de route locaux incluent : beforeEnter, beforeRouteUpdate et beforeRouteLeave.

Par exemple :

router.beforeEach((to, from, next) => {
  // 进行权限判断或其他操作
  next()
})

Dans le code ci-dessus, un garde de routage global est défini via la fonction beforeEach vers et depuis qui représentent respectivement l'itinéraire à venir et l'itinéraire actuel, et next représente la fonction de libération d'itinéraire, vous devez appeler la fonction suivante dans la garde pour effectuer l'opération de saut de routage.

4. Résumé

Ce tutoriel présente les concepts de base et l'utilisation du routage et de la navigation dans le framework VUE3, ainsi que quelques concepts avancés. J'espère que grâce à ce didacticiel, vous pourrez maîtriser l'utilisation de base du routage et de la navigation dans VUE3 et être capable d'appliquer les fonctions de routage et de navigation dans des projets réels.

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!