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 975b587bf85a482ea10b0a28848e78a4 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 300ff3b250bc578ac201dd5fb34a0004 component to add transition effects for page switching. First, wrap a 300ff3b250bc578ac201dd5fb34a0004 component outside the 975b587bf85a482ea10b0a28848e78a4 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 c9ccee2e6ea535a969eb3f532ad9fe89 tag, the code is as follows:

.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 975b587bf85a482ea10b0a28848e78a4 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 300ff3b250bc578ac201dd5fb34a0004 component in App.vue to add transition effects for page switching. By setting the key attribute for the 975b587bf85a482ea10b0a28848e78a4 component, we can control the triggering timing of the transition effect. Define the style of the transition effect in the c9ccee2e6ea535a969eb3f532ad9fe89 tag, for example, set the opacity attribute and transition attribute in the .fade style. Finally, we can customize different transition effects as needed to improve user experience.

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!