Comment utiliser le routage dans Vue pour obtenir des effets de transition lors du changement de page ?

Comment utiliser le routage dans Vue pour obtenir des effets de transition lors du changement de page ?

Avec le développement de la technologie front-end, l'animation de changement de page, en tant qu'élément important de l'amélioration de l'expérience utilisateur, est de plus en plus largement utilisée dans les applications Web. Dans le framework Vue, nous pouvons implémenter le changement de page via le routage et le combiner avec l'effet de transition de Vue pour obtenir des effets d'animation lors du changement de page. Cet article expliquera comment utiliser les effets de routage et de transition de Vue pour obtenir l'effet de transition du changement de page.

Tout d'abord, nous devons installer le plug-in de routage Vue. Entrez la commande suivante sur la ligne de commande pour installer :

npm install vue-router

Après l'installation, introduisez Vue et Vue-router dans le fichier d'entrée du projet (main.js) et créez une instance Vue-router. Le code est le suivant :

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

Ensuite, nous devons configurer le routage. Créez un fichier index.js sous le dossier du routeur et configurez-y les informations de routage. Voici un exemple :

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

Dans le processus de configuration du routage, nous pouvons obtenir la relation correspondante entre le routage et les pages en définissant le chemin, le nom et le composant. Par exemple, dans le code ci-dessus : lors de l'accès au chemin racine, le composant Home sera rendu ; lors de l'accès au chemin /about, le composant About sera rendu.

Ensuite, nous devons utiliser la balise dans App.vue pour restituer le composant correspondant à l'itinéraire. Le code est le suivant :

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

À ce stade, nous pouvons déjà changer de page via le routage. Mais si nous voulons ajouter un effet de transition pour le changement de page, nous devons alors utiliser l'effet de transition de Vue.

Dans App.vue, nous pouvons utiliser le composant de Vue pour ajouter des effets de transition au changement de page. Tout d'abord, enveloppez un composant à l'extérieur de la balise , le code est le suivant :

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

Ensuite, définissez le style .fade dans la balise