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

   Copier après la connexion

   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

   Copier après la connexion
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()
    }
     },
     // ...
   ]

   Copier après la connexion

   在上述代码中，我们在路由配置中添加了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()
    }
     },
     // ...
   ]

   Copier après la connexion

   在上述代码中，我们将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

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!