Vue-Router: How to use route transition to achieve transition effect?

Vue-Router: How to use route transition to achieve transition effect?

Introduction:
With the continuous advancement of front-end development technology, the need for smooth transition effects between pages has become more and more common. Vue-Router, as the official routing manager of Vue.js, provides us with many powerful functions, including route transition. This article will introduce how to use transitions in Vue-Router to achieve smooth transition effects between pages, and give specific code examples.

1. Routing transition in Vue-Router
In Vue-Router, routing transition is implemented through the transition component. The transition component is a component provided by Vue.js that can transition elements according to different states. We can use the transition component to achieve the transition effect when entering and leaving the page.

2. Configure routing transition
To achieve the routing transition effect, we need to add the transition attribute to the routing configuration and assign it a name. For example:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      name: 'home',
      meta: {
        transition: 'fade'
      }
    },
    {
      path: '/about',
      component: About,
      name: 'about',
      meta: {
        transition: 'slide'
      }
    }
  ]
})

In the above code, we added a transition field to the meta attribute of the route and specified different transition effect names. In this way, when the page switches, we can control the transition effect of the page based on this transition effect name.

3. Writing styles for transition effects
In HTML, we can write styles for different transition effects through CSS. For example, write a style for the fade transition effect:

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

In the above code, we set the opacity transition time to 0.5 seconds through the transition attribute. The .fade-enter and .fade-leave-to styles are used to set the entry and exit styles of elements. Here we set the transparency of the element to 0.

4. Apply transition effects
In order to apply transition effects, we need to dynamically add the style class name of the transition effect according to the transition effect name when routing is switched. The following is a simple implementation example:

<template>
  <transition :name="transitionName">
    <router-view />
  </transition>
</template>

<script>
export default {
  computed: {
    transitionName() {
      const toRoute = this.$router.currentRoute;
      const fromRoute = this.$router.history.current;
      const toTransition = toRoute.meta.transition;
      const fromTransition = fromRoute.meta.transition;
      const defaultTransition = 'fade';

      return toTransition || fromTransition || defaultTransition;
    }
  }
}
</script>

In the above code, we dynamically calculate the transitionName through the computed attribute. First, we get the current toRoute and fromRoute, and then determine which transition effect should be used based on the transition field in their meta attributes. If neither is specified, the default transition effect is used.

5. Summary
Through the configuration and implementation of the above steps, we can easily use route transition in Vue-Router to achieve a smooth transition effect between pages. We can customize different transition effects as needed and use transition components and CSS to complete specific animation effects. I hope this article has provided some help for everyone to understand and use routing transition in Vue-Router.

Reference documentation:

1. Vue-Router official documentation: https://router.vuejs.org/
2. Vue.js official documentation: https:// vuejs.org/

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