Explication détaillée des fonctions de routage dans Vue3 : implémentation de sauts de routage pour les applications SPA

Vue3 est la dernière version de Vue, et sa fonction de routage a subi des changements majeurs par rapport à la version Vue2. En tant que l'un des outils importants pour la mise en œuvre d'applications à page unique (SPA), les fonctions de routage de Vue3 sont largement utilisées. Dans cet article, nous expliquerons en détail la fonction de routage dans Vue3, y compris les sauts de routage et leur implémentation.

1. Introduction à la fonction de routage de Vue3

La fonction de routage dans Vue3 se compose principalement de deux parties : l'instance de routage et le routeur. Parmi elles, l'instance de routage est une instance de Vue Router, qui est utilisée pour définir les routes et leurs chemins de saut ; et le routeur est chargé d'injecter l'instance de routage dans l'instance Vue pour la rendre efficace et permettre les sauts de routage.

2. Instance de routage

1. Créer une instance de routage

Dans Vue3, nous pouvons créer une instance de routage en appelant la fonction Vue Router. L'exemple de code est le suivant :

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

Dans le code ci-dessus, . createRouter() peut accepter un objet de configuration, incluant deux propriétés : <code>history et routes. Parmi eux, history est utilisé pour spécifier le mode de routage, et routes est utilisé pour définir la table de routage. createRouter()函数可以接受一个配置对象，包括history和routes两个属性。其中history用于指定路由模式，routes则用于定义路由表。

2. 路由表定义

路由表是由路由配置对象数组组成的，数组中每个对象都表示一个路由的定义，包括以下几个属性：

• path：路由路径；
• component：路由组件；
• name：路由名称；
• meta：路由元信息。

在路由表中，我们可以使用path和component来定义路由路径和路由组件，示例代码如下：

import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import Contact from '@/views/Contact.vue';

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

路由路径可以使用占位符来表示动态参数，示例代码如下：

const router = createRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: true
    }
  ]
})

上述示例中，路由路径/user/:id中的冒号表示该路径可以匹配一个动态参数，我们可以通过props属性来将动态参数作为组件属性传递到路由组件中。

3. 嵌套路由

在Vue3中，我们可以使用嵌套路由来组织应用的路由结构。嵌套路由是指路由路径包含多个层级的情况，示例代码如下：

const router = createRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '',
          component: Home
        },
        {
          path: '/about',
          component: About
        },
        {
          path: '/contact',
          component: Contact
        }
      ]
    }
  ]
})

上述示例中，我们在/路径下定义了一个名为Layout的路由组件，并将其作为嵌套路由的父级路径。Layout组件中存在三个子路由，分别对应不同的路径。

4. 路由守卫

路由守卫用于在路由跳转前或跳转后执行一些逻辑操作。在Vue3中，路由守卫主要分为全局守卫、路由守卫和组件守卫三类。

全局守卫有三种：

• beforeEach：在路由跳转前执行逻辑；
• beforeResolve：在路由解析完成后，进行路由匹配前执行的逻辑；
• afterEach：路由跳转后执行的逻辑。

路由守卫分为两种：

• beforeEnter：在进入路由之前执行的逻辑；
• beforeLeave：在离开路由之前执行的逻辑。

组件守卫是针对组件级路由而言，包括以下几种：

• beforeRouteEnter：在组件进入路由前执行的逻辑；
• beforeRouteUpdate：在组件更新路由前执行的逻辑；
• beforeRouteLeave：在组件离开路由前执行的逻辑。

三、路由器

1. 注入路由

在创建好路由实例后，我们需要将其注入到Vue实例中，使之生效。在Vue3中，我们可以通过调用createApp函数来创建Vue实例，示例代码如下：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

在上述代码中，我们使用createApp函数创建Vue实例，并通过use方法将路由实例router注入到Vue实例中。

2. 路由跳转

在Vue3中，我们可以通过调用router.push方法实现路由跳转。router.push方法接受一个参数，用于指定需要跳转的路由路径。示例代码如下：

import { RouterLink } from 'vue-router';

<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<RouterLink to="/contact">Contact</RouterLink>

在上述示例中，我们使用c3eee9878978ade0d6491433c64180cf组件代替了Vue2版本中的b988a8fd72e5e0e42afffd18f951b277

Définition de la table de routage
🎜La table de routage est composée d'un tableau d'objets de configuration de routage. Chaque objet du tableau représente la définition d'une route, comprenant les attributs suivants : 🎜

. 🎜 path : chemin de routage ; 🎜🎜component : composant de routage ; 🎜🎜name : nom de routage ; > : Méta-informations de routage. 🎜

🎜Dans la table de routage, nous pouvons utiliser path et component pour définir les chemins de routage et les composants de routage. L'exemple de code est le suivant : 🎜rrreee🎜Le. le chemin de routage peut être utilisé comme espace réservé pour représenter les paramètres dynamiques, l'exemple de code est le suivant : 🎜rrreee🎜Dans l'exemple ci-dessus, les deux points dans le chemin de routage /user/:id indiquent que le chemin peut correspondre un paramètre dynamique, nous pouvons transmettre l'attribut props pour transmettre des paramètres dynamiques en tant que propriétés de composant au composant de routage. 🎜

🎜Routage imbriqué🎜🎜🎜Dans Vue3, nous pouvons utiliser le routage imbriqué pour organiser la structure de routage de l'application. Le routage imbriqué fait référence à la situation où le chemin de routage contient plusieurs niveaux. L'exemple de code est le suivant : 🎜rrreee🎜Dans l'exemple ci-dessus, nous avons défini un fichier nommé Layout sous le /code> composant de routage de chemin et en faire le chemin parent de la route imbriquée. Il existe trois sous-routes dans le composant <code>Layout, correspondant à différents chemins. 🎜
🎜Route guard🎜🎜🎜Route guard est utilisé pour effectuer certaines opérations logiques avant ou après le saut d'itinéraire. Dans Vue3, les gardes de routage sont principalement divisés en trois catégories : les gardes globaux, les gardes de routage et les gardes de composants. 🎜🎜Il existe trois types de gardes globales : 🎜
🎜beforeEach : exécute la logique avant le saut de route ; 🎜🎜beforeResolve : une fois l'analyse de la route terminée, avant la correspondance de la route ; Logique d'exécution ; 🎜🎜afterEach : Logique exécutée après le saut de routage. 🎜
🎜Les gardes d'itinéraire sont divisés en deux types : 🎜
🎜beforeEnter : logique exécutée avant d'entrer dans l'itinéraire ; 🎜🎜beforeLeave : avant de quitter l'itinéraire ; Logique d'exécution. 🎜
🎜Les gardes de composants sont destinés au routage au niveau des composants, notamment les suivants : 🎜
🎜beforeRouteEnter : logique exécutée avant que le composant n'entre dans la route ; 🎜🎜beforeRouteUpdate  ; code> : Logique exécutée avant que le composant ne mette à jour la route ; 🎜🎜<code>beforeRouteLeave : Logique exécutée avant que le composant ne quitte la route. 🎜
🎜3. Routeur 🎜🎜🎜Injecter le routage 🎜🎜🎜Après avoir créé l'instance de routage, nous devons l'injecter dans l'instance Vue pour la rendre efficace. Dans Vue3, nous pouvons créer une instance Vue en appelant la fonction createApp. L'exemple de code est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la fonction createApp pour. créez une instance Vue et injectez l'instance de routage router dans l'instance Vue via la méthode use. 🎜
🎜Saut d'itinéraire🎜🎜🎜Dans Vue3, nous pouvons implémenter le saut d'itinéraire en appelant la méthode router.push. La méthode router.push accepte un paramètre pour spécifier le chemin de routage qui doit être sauté. L'exemple de code est le suivant : 🎜rrreee🎜Dans l'exemple ci-dessus, nous utilisons le composant c3eee9878978ade0d6491433c64180cf au lieu du composant b988a8fd72e5e0e42afffd18f951b277 dans Vue2. version pour la mise en œuvre du saut d'itinéraire. 🎜🎜Ce qui précède est une explication détaillée de la fonction de routage dans Vue3, y compris l'utilisation d'instances de routage et de routeurs et la mise en œuvre de sauts de routage. En étudiant cet article, je pense que vous comprenez mieux la fonction de routage dans Vue3. 🎜

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!