Bagaimana untuk menggunakan Penghala Vue untuk mencapai kesan peralihan apabila menukar laluan?

Bagaimana untuk menggunakan Penghala Vue untuk mencapai kesan peralihan apabila menukar laluan?

Pengenalan:
Vue Router ialah perpustakaan pengurusan penghalaan yang disyorkan secara rasmi oleh Vue.js untuk membina SPA (Aplikasi Halaman Tunggal dengan mengurus surat-menyurat antara penghalaan URL dan komponen). Dalam pembangunan sebenar, untuk meningkatkan pengalaman pengguna atau memenuhi keperluan reka bentuk, kami sering menggunakan kesan peralihan untuk menambah dinamik dan keindahan pada penukaran halaman. Artikel ini akan memperkenalkan cara menggunakan Penghala Vue untuk mencapai kesan peralihan apabila menukar laluan.

1. Pasang Penghala Vue
   Sebelum bermula, pastikan dahulu Vue.js dan Penghala Vue dipasang. Jika ia tidak dipasang, anda boleh memasangnya melalui arahan berikut:

   npm install vue vue-router

   Kemudian buat contoh Penghala Vue dalam projek, seperti yang ditunjukkan di bawah:

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)
   
   const router = new VueRouter({
     mode: 'history',
     routes: [
    // 定义路由路径和对应的组件
    // ...
     ]
   })
   
   export default router

2. Tambah komponen kesan peralihan
   Vue menyediakan mod peralihan, yang boleh dilalui antara komponen Tambah kesan peralihan untuk mencapai kesan animasi apabila menukar halaman. Langkah asas untuk menggunakan kesan peralihan dalam Penghala Vue adalah seperti berikut:

(1) Cipta komponen bernama "Transition" atau "TransitionGroup" dalam projek untuk membalut komponen yang perlu dialihkan. Sebagai contoh, kita boleh mencipta komponen bernama "FadeTransition" untuk melaksanakan kesan peralihan kecerunan.

<template>
  <transition name="fade">
    <slot></slot>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

Dalam kod di atas, kami menggunakan komponen peralihan Vue <peralihan> untuk membalut kandungan yang perlu dialihkan dan mentakrifkan kesan peralihan sebagai kesan kecerunan fade-in dan fade-out . Di sini, kami telah menggunakan nama kelas peralihan yang dipanggil "pudar". <transition>将需要过渡的内容进行包裹，并定义过渡的效果为淡入淡出的渐变效果。在这里，我们使用了名为"fade"的过渡类名。

(2) 在App组件中使用过渡组件。在需要添加过渡效果的地方，例如页面切换的地方，在App组件中使用我们之前创建的"FadeTransition"组件，例如：

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

在上述代码中，我们将<router-view>包裹在"FadeTransition"组件中，使得在路由切换时，实现渐变的过渡效果。

3. 配置路由切换时的过渡效果
   为了实现路由切换时的过渡效果，我们需要在路由配置中添加相应的钩子函数。在Vue Router中，有多个路由钩子函数可供使用，例如beforeEnter、beforeLeave等。下面是一个钩子函数的示例代码：

   const routes = [
     {
    path: '/',
    component: Home,
    beforeEnter: (to, from, next) => {
      // 在进入新页面之前执行的动画
      // ...
      next()
    },
    beforeLeave: (to, from, next) => {
      // 在离开当前页面之前执行的动画
      // ...
      next()
    }
     },
     // ...
   ]

   在上述代码中，我们在路由配置中添加了beforeEnter和beforeLeave钩子函数，并在这两个函数中执行路由切换时需要的过渡动画。

4. 添加其他过渡效果
   除了渐变效果之外，Vue Router还可以实现其他更多的过渡效果。例如，我们可以使用不同的CSS过渡类名来实现不同的过渡效果。我们可以在Vue Router的路由配置中添加以下CSS类名来实现其他过渡效果：

   const routes = [
     {
    path: '/',
    component: Home,
    beforeEnter: (to, from, next) => {
      // 在进入新页面之前执行的动画
      document.body.className = 'fade-enter'
      next()
    },
    beforeLeave: (to, from, next) => {
      // 在离开当前页面之前执行的动画
      document.body.className = 'fade-leave'
      next()
    }
     },
     // ...
   ]

   在上述代码中，我们将document.body.className

   (2) Gunakan komponen peralihan dalam komponen Apl. Apabila kesan peralihan perlu ditambah, seperti penukaran halaman, gunakan komponen "FadeTransition" yang kami buat sebelum ini dalam komponen Apl, contohnya:
rrreee

Dalam kod di atas, kami akan <router-view> dibalut dalam komponen "FadeTransition" untuk mencapai kesan peralihan kecerunan apabila penghalaan ditukar.

Konfigurasikan kesan peralihan apabila penghalaan ditukar

Untuk mencapai kesan peralihan apabila penghalaan ditukar, kita perlu menambah fungsi cangkuk yang sepadan dalam konfigurasi penghalaan. Dalam Penghala Vue, terdapat berbilang fungsi cangkuk penghalaan tersedia, seperti beforeEnter, beforeLeave, dsb. Berikut ialah contoh kod fungsi cangkuk:

rrreee🎜Dalam kod di atas, kami menambahkan fungsi cangkuk beforeEnter dan beforeLeave dalam konfigurasi penghalaan, dan dalam kedua-dua ini fungsi Animasi peralihan diperlukan semasa melakukan penukaran laluan. 🎜🎜🎜🎜Tambahkan kesan peralihan yang lain🎜Selain kesan kecerunan, Penghala Vue juga boleh mencapai lebih banyak kesan peralihan yang lain. Sebagai contoh, kita boleh menggunakan nama kelas peralihan CSS yang berbeza untuk mencapai kesan peralihan yang berbeza. Kami boleh menambah nama kelas CSS berikut dalam konfigurasi penghalaan Penghala Vue untuk mencapai kesan peralihan yang lain: 🎜rrreee🎜Dalam kod di atas, kami menetapkan document.body.className kepada "fade-enter" masing-masing dan "fade-leave", dan kemudian gunakan CSS untuk mencapai kesan peralihan yang berbeza. 🎜🎜🎜🎜Ringkasan: 🎜Dalam artikel ini, kami memperkenalkan cara menggunakan Penghala Vue untuk mencapai kesan peralihan apabila menukar laluan. Mula-mula, kami memasang Vue Router dan mencipta contoh Vue Router. Kemudian, kami mencipta komponen peralihan bernama "FadeTransition" dan menggunakan komponen peralihan ini dalam komponen Apl untuk mencapai kesan peralihan kecerunan apabila menukar halaman. Akhir sekali, kami melaksanakan penukaran kesan peralihan dengan menambahkan fungsi cangkuk dalam konfigurasi penghalaan dan melaksanakan animasi peralihan dalam fungsi ini. 🎜🎜Saya harap artikel ini dapat membantu semua orang, terima kasih kerana membaca! 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Penghala Vue untuk mencapai kesan peralihan apabila menukar laluan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!