Fonction de routage dans Vue3 : implémentation de sauts de routage pour les applications SPA

Vue3 est actuellement l'un des frameworks JavaScript les plus populaires, et dans les mises à jour récentes, Vue3 a introduit de nouvelles fonctionnalités très utiles, dont des capacités de routage plus puissantes.

Il existe quelques différences entre la fonction de routage de Vue3 et Vue2, nous devons donc revoir le routage de Vue2 avant d'apprendre la fonction de routage de Vue3.

Le routage dans Vue2 est implémenté à l'aide de Vue Router. Tout d'abord, nous devons installer Vue Router dans le projet, puis le configurer dans l'instance Vue. Pour un système de routage simple, il suffit de spécifier chaque chemin et son composant correspondant :

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

Dans le code ci-dessus, nous créons une instance de Vue Router qui contient deux routes : '/' et '/about'. Lorsque les utilisateurs visitent ces URL, Vue Router affichera les composants correspondants.

Le principal changement dans le routage dans Vue3 est de simplifier l'utilisation des fonctions de routage en utilisant une nouvelle API. Ensuite, nous présenterons en détail la fonction de routage dans Vue3.

Créer le routage Vue3

Tout d'abord, nous devons installer Vue Router 4 :

npm install vue-router@4

Ensuite, nous devons importer Vue Router dans l'application Vue et créer une instance de Vue Router :

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

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

export default router

Notez que contrairement au routage de Vue2, nous maintenant utilisez la fonction createRouter() pour créer des routes au lieu de new Router().

Le principal changement dans le routage dans Vue3 est que la fonction de routage adopte une approche plus déclarative. Nous utilisons la fonction createWebHistory() pour spécifier l'utilisation du mode historique HTML5. Il s'agit d'une technologie relativement nouvelle qui nous permet de mettre à jour l'URL de la page de manière plus sûre sans recharger la page entière.

Définir des itinéraires

La façon de définir des itinéraires est la même que celle de Vue2. Nous pouvons définir des routes en utilisant le tableau routes. Chaque itinéraire se compose d'un chemin et d'un composant correspondant.

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

Paramètres d'itinéraire

En utilisant les paramètres d'itinéraire, nous pouvons faire en sorte que les URL aient des valeurs variables. Par exemple, nous pouvons configurer la route et l'URL suivantes :

const routes = [
  { path: '/user/:id', component: User }
]

Cela fera de la partie :id de l'URL un paramètre pouvant accepter n'importe quelle valeur de chaîne, par exemple :

/user/1
/user/abc
/user/123abc

Nous pouvons utiliser $route.params dans le composant pour accéder aux paramètres de l'itinéraire. Par exemple :

export default {
  name: 'User',
  created() {
    console.log(this.$route.params.id)
  }
}

Cela affichera les paramètres d'itinéraire à chaque fois que le composant est créé.

Itinéraires nommés

Nous pouvons nommer l'itinéraire lors de sa définition. Ceci est utile pour certaines méthodes de navigation sur itinéraire, par exemple :

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

Définir un itinéraire nommé, auquel nous pouvons accéder via l'attribut $name.

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

Cela passera au composant User avec l'identifiant du paramètre.

Navigation d'itinéraire

Nous pouvons utiliser la méthode suivante pour naviguer vers un autre itinéraire :

// 带路径的导航
router.push('/about')

// 带命名的导航
router.push({ name: 'user', params: { id: 123 }})

// 重定向到另一个路由
router.replace('/about')

Lorsque nous utilisons le routage dans un composant, nous pouvons utiliser l'objet $route pour accéder aux informations d'itinéraire actuelles.

export default {
  name: 'About',
  created() {
    console.log(this.$route.path)
  }
}

Route Guards

Route Guards est un mécanisme pour vérifier la navigation, nous permettant d'exécuter du code avant ou après l'interception de toutes les routes. Dans Vue3, nous pouvons utiliser le garde de route suivant :

const router = createRouter({
  routes: [...]
})

router.beforeEach((to, from, next) => {
  // 在此处添加路由守卫代码
  next()
})

Dans le garde beforeEach, nous pouvons vérifier s'il est connecté ou demander à l'utilisateur d'effectuer les actions nécessaires pour continuer la navigation.

Résumé

Vue3 présente des améliorations majeures en matière de routage, le rendant plus facile à utiliser que Vue2. Il adopte une approche plus déclarative, facilitant la définition et l'utilisation des itinéraires. De plus, Vue3 introduit également le mode historique HTML5, qui rend le routage plus sécurisé et plus utilisable.

L'utilisation de la fonction de routage de Vue3 peut vous aider à créer votre propre application SPA, et vous pouvez sauter et naviguer facilement.

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!