Comment utiliser Vue Router pour obtenir un effet de transition lors du changement d'itinéraire ?

Comment utiliser Vue Router pour obtenir des effets de transition lors du changement d'itinéraire ?

Introduction : 
Vue Router est une bibliothèque de gestion de routage officiellement recommandée par Vue.js pour la création de SPA (Single Page Application). Elle peut réaliser la commutation entre les pages en gérant la correspondance entre le routage des URL et les composants. Dans le développement réel, afin d'améliorer l'expérience utilisateur ou de répondre aux besoins de conception, nous utilisons souvent des effets de transition pour ajouter de la dynamique et de la beauté au changement de page. Cet article explique comment utiliser Vue Router pour obtenir l'effet de transition lors du changement d'itinéraire.

1. Installer Vue Router
   Avant de commencer, assurez-vous d'abord que Vue.js et Vue Router sont installés. S'il n'est pas installé, vous pouvez l'installer via la commande suivante :

   npm install vue vue-router

   Créez ensuite une instance de Vue Router dans le projet, comme indiqué ci-dessous :

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)
   
   const router = new VueRouter({
     mode: 'history',
     routes: [
    // 定义路由路径和对应的组件
    // ...
     ]
   })
   
   export default router

2. Ajouter un composant d'effet de transition
   Vue fournit un mode de transition, qui peut être passé entre les composants Ajoutez des effets de transition pour obtenir des effets d'animation lors du changement de page. Les étapes de base pour utiliser les effets de transition dans Vue Router sont les suivantes :

(1) Créez un composant nommé "Transition" ou "TransitionGroup" dans le projet pour encapsuler les composants qui doivent faire l'objet d'une transition. Par exemple, nous pouvons créer un composant nommé « FadeTransition » pour implémenter un effet de transition dégradé.

<template>
  <transition name="fade">
    <slot></slot>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

Dans le code ci-dessus, nous utilisons le composant de transition de Vue <transition> pour envelopper le contenu qui doit faire l'objet d'une transition et définir l'effet de transition comme un effet de dégradé de fondu entrant et sortant. . Ici, nous avons utilisé un nom de classe de transition appelé « fade ». <transition>将需要过渡的内容进行包裹，并定义过渡的效果为淡入淡出的渐变效果。在这里，我们使用了名为"fade"的过渡类名。

(2) 在App组件中使用过渡组件。在需要添加过渡效果的地方，例如页面切换的地方，在App组件中使用我们之前创建的"FadeTransition"组件，例如：

<template>
  <div id="app">
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

在上述代码中，我们将<router-view>包裹在"FadeTransition"组件中，使得在路由切换时，实现渐变的过渡效果。

3. 配置路由切换时的过渡效果
   为了实现路由切换时的过渡效果，我们需要在路由配置中添加相应的钩子函数。在Vue Router中，有多个路由钩子函数可供使用，例如beforeEnter、beforeLeave等。下面是一个钩子函数的示例代码：

   const routes = [
     {
    path: '/',
    component: Home,
    beforeEnter: (to, from, next) => {
      // 在进入新页面之前执行的动画
      // ...
      next()
    },
    beforeLeave: (to, from, next) => {
      // 在离开当前页面之前执行的动画
      // ...
      next()
    }
     },
     // ...
   ]

   在上述代码中，我们在路由配置中添加了beforeEnter和beforeLeave钩子函数，并在这两个函数中执行路由切换时需要的过渡动画。

4. 添加其他过渡效果
   除了渐变效果之外，Vue Router还可以实现其他更多的过渡效果。例如，我们可以使用不同的CSS过渡类名来实现不同的过渡效果。我们可以在Vue Router的路由配置中添加以下CSS类名来实现其他过渡效果：

   const routes = [
     {
    path: '/',
    component: Home,
    beforeEnter: (to, from, next) => {
      // 在进入新页面之前执行的动画
      document.body.className = 'fade-enter'
      next()
    },
    beforeLeave: (to, from, next) => {
      // 在离开当前页面之前执行的动画
      document.body.className = 'fade-leave'
      next()
    }
     },
     // ...
   ]

   在上述代码中，我们将document.body.className

   (2) Utilisez des composants de transition dans les composants de l'application. Lorsque des effets de transition doivent être ajoutés, tels que le changement de page, utilisez le composant "FadeTransition" que nous avons créé précédemment dans le composant App, par exemple :
rrreee

Dans le code ci-dessus, nous allons <router-view> est enveloppé dans le composant "FadeTransition" pour obtenir un effet de transition dégradé lorsque le routage est commuté.

Configurer l'effet de transition lorsque le routage est commuté

Afin d'obtenir l'effet de transition lorsque le routage est commuté, nous devons ajouter la fonction de hook correspondante dans la configuration du routage. Dans Vue Router, plusieurs fonctions de hook de routage sont disponibles, telles que beforeEnter, beforeLeave, etc. Voici un exemple de code d'une fonction hook :

rrreee🎜Dans le code ci-dessus, nous avons ajouté les fonctions hook beforeEnter et beforeLeave dans la configuration de routage, et dans ces deux fonctions Animation de transition requise lors de l'exécution d'un changement d'itinéraire. 🎜🎜🎜🎜Ajouter d'autres effets de transition🎜En plus des effets de dégradé, Vue Router peut également obtenir d'autres effets de transition. Par exemple, nous pouvons utiliser différents noms de classes de transition CSS pour obtenir différents effets de transition. Nous pouvons ajouter les noms de classes CSS suivants dans la configuration de routage de Vue Router pour obtenir d'autres effets de transition : 🎜rrreee🎜Dans le code ci-dessus, nous définissons respectivement document.body.className sur "fade-enter". et "fade-leave", puis utilisez CSS pour obtenir différents effets de transition. 🎜🎜🎜🎜Résumé : 🎜Dans cet article, nous avons présenté comment utiliser Vue Router pour obtenir des effets de transition lors du changement d'itinéraire. Tout d'abord, nous avons installé Vue Router et créé une instance de Vue Router. Ensuite, nous avons créé un composant de transition nommé "FadeTransition" et utilisé ce composant de transition dans le composant App pour obtenir l'effet de transition dégradé lors du changement de page. Enfin, nous implémentons la commutation des effets de transition en ajoutant des fonctions de hook dans la configuration de routage et en réalisant des animations de transition dans ces fonctions. 🎜🎜J'espère que cet article pourra être utile à tout le monde, merci d'avoir lu ! 🎜

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!