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 975b587bf85a482ea10b0a28848e78a4 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 300ff3b250bc578ac201dd5fb34a0004 de Vue pour ajouter des effets de transition au changement de page. Tout d'abord, enveloppez un composant 300ff3b250bc578ac201dd5fb34a0004 à l'extérieur de la balise 975b587bf85a482ea10b0a28848e78a4, 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 c9ccee2e6ea535a969eb3f532ad9fe89

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

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

Dans le code ci-dessus, nous L'attribut opacité est défini pour les styles .fade-enter et .fade-leave-active, et l'attribut de transition est défini pour les styles .fade-enter-active et .fade-leave-active .

Enfin, ajoutez un attribut clé au composant 975b587bf85a482ea10b0a28848e78a4 de la configuration de routage. Le code est le suivant :

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

En ajoutant l'attribut clé, Vue déterminera si un effet de transition est nécessaire en fonction du changement. de la clé.

À ce stade, nous avons implémenté l'effet de transition lors du changement de page. Lorsque nous cliquons sur le lien de navigation pour changer de page, la page apparaîtra et disparaîtra en fondu, améliorant ainsi l'expérience utilisateur.

Pour résumer, nous pouvons utiliser les effets de routage et de transition de Vue pour obtenir l'effet de transition lors du changement de page. Tout d'abord, nous devons installer et configurer le plug-in de routage de Vue, puis utiliser le composant 300ff3b250bc578ac201dd5fb34a0004 dans App.vue pour ajouter des effets de transition pour le changement de page. En définissant l'attribut key pour le composant 975b587bf85a482ea10b0a28848e78a4, nous pouvons contrôler le temps de déclenchement de l'effet de transition. Définissez le style de l'effet de transition dans la balise c9ccee2e6ea535a969eb3f532ad9fe89, par exemple, définissez l'attribut d'opacité et l'attribut de transition dans le style .fade. Enfin, nous pouvons personnaliser différents effets de transition selon les besoins pour améliorer l'expérience utilisateur.

J'espère que cet article vous aidera à comprendre comment utiliser le routage dans Vue pour obtenir des effets de transition lors du changement de page. Les questions et les échanges sont les bienvenus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!