How to use Vue Router to achieve transition effect when switching routes?

How to use Vue Router to achieve the transition effect when switching routes?

Introduction:
Vue Router is a routing management library officially recommended by Vue.js for building SPA (Single Page Application). It can implement pages by managing the correspondence between URL routing and components. switch between. In actual development, in order to improve user experience or meet design needs, we often use transition effects to add dynamics and beauty to page switching. This article will introduce how to use Vue Router to achieve the transition effect when switching routes.

1. Installing Vue Router
   Before you begin, first make sure that Vue.js and Vue Router are installed. If it is not installed, you can install it through the following command:

   npm install vue vue-router

   Then create a Vue Router instance in the project, as shown below:

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

2. Add transition effect component
   Vue provides transition mode, which can achieve animation effects when switching pages by adding transition effects between components. The basic steps for using transition effects in Vue Router are as follows:

(1) Create a component named "Transition" or "TransitionGroup" in the project to wrap the components that need to be transitioned. For example, we can create a component named "FadeTransition" to implement a gradient transition effect.

<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>

In the above code, we use Vue's transition component<transition></transition> to wrap the content that needs to be transitioned, and define the transition effect as a fade-in and fade-out gradient effect. Here, we have used a transition class name called "fade".

(2) Use transition components in App components. Where transition effects need to be added, such as page switching, use the "FadeTransition" component we created before in the App component, for example:

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

In the above code, we will <router></router> is wrapped in the "FadeTransition" component to achieve a gradient transition effect when routing is switched.

3. Configuring the transition effect when routing is switched
   In order to achieve the transition effect when routing is switched, we need to add the corresponding hook function in the routing configuration. In Vue Router, there are multiple routing hook functions available, such as beforeEnter, beforeLeave, etc. The following is a sample code of a hook function:

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

   In the above code, we added the beforeEnter and beforeLeave hook functions in the routing configuration, and in these two The transition animation required when performing route switching in a function.

4. Add other transition effects
   In addition to gradient effects, Vue Router can also achieve other more transition effects. For example, we can use different CSS transition class names to achieve different transition effects. We can add the following CSS class names in the routing configuration of Vue Router to achieve other transition effects:

   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()
    }
     },
     // ...
   ]

   In the above code, we set document.body.className to "fade" respectively -enter" and "fade-leave", and then use CSS to achieve different transition effects.

Summary:
In this article, we introduced how to use Vue Router to achieve the transition effect when routing switching. First, we installed Vue Router and created a Vue Router instance. Then, we created a transition component named "FadeTransition" and used this transition component in the App component to achieve the gradient transition effect when switching pages. Finally, we implement the switching of transition effects by adding hook functions in the routing configuration and performing transition animations in these functions.

I hope this article can be helpful to everyone, thank you for reading!

The above is the detailed content of How to use Vue Router to achieve transition effect when switching routes?. For more information, please follow other related articles on the PHP Chinese website!