How to use routing in Vue to achieve transition effects when switching pages?

How to use routing in Vue to achieve transition effects when switching pages?

With the development of front-end technology, page switching animation, as an important part of improving user experience, is more and more widely used in Web applications. In the Vue framework, we can implement page switching through routing, and combine it with Vue's transition effect to achieve animation effects when switching pages. This article will introduce how to use Vue's routing and transition effects to achieve the transition effect of page switching.

First, we need to install the Vue routing plug-in. Enter the following command on the command line to install:

npm install vue-router

After installation, introduce Vue and Vue-router into the project's entry file (main.js), and create a Vue-router instance. The code is as follows:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Next, we need to configure routing. Create an index.js file under the router folder and configure routing information in it. The following is an example:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

In the process of configuring routing, we can achieve the corresponding relationship between routing and pages by defining path, name and component. For example, in the above code: when accessing the root path, the Home component will be rendered; when accessing the /about path, the About component will be rendered.

Next, we need to use the tag in App.vue to render the component corresponding to the route. The code is as follows:

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

At this point, we can already switch pages through routing. But if we want to add a transition effect for page switching, then we need to use Vue's transition effect.

In App.vue, we can use Vue's component to add transition effects for page switching. First, wrap a component outside the tag, the code is as follows:

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

Then, define the .fade style in the

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-active {
  opacity: 0;
}

In the above code, we set the opacity attribute for the .fade-enter and .fade-leave-active styles, and the transition attribute for the .fade-enter-active and .fade-leave-active styles.

Finally, add a key attribute in the component of the routing configuration. The code is as follows:

{
  path: '/',
  name: 'Home',
  component: Home,
  key: 'home'
},
{
  path: '/about',
  name: 'About',
  component: About,
  key: 'about'
}

By adding the key attribute, Vue will determine whether it is needed based on the change of the key. Make transition effects.

So far, we have implemented the transition effect when switching pages. When we click on the navigation link to switch pages, the page will fade in and out, improving the user experience.

To summarize, we can use Vue’s routing and transition effects to achieve the transition effect when switching pages. First, we need to install and configure Vue's routing plug-in, and then use the component in App.vue to add transition effects for page switching. By setting the key attribute for the component, we can control the triggering timing of the transition effect. Define the style of the transition effect in the

I hope this article will help you understand how to use routing in Vue to achieve transition effects when switching pages. Questions and exchanges are welcome.

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