Vue-Router: Bagaimana untuk menggunakan peralihan laluan untuk mencapai kesan peralihan?

Vue-Router: Bagaimana untuk menggunakan peralihan laluan untuk mencapai kesan peralihan?

Pengenalan:
Dengan kemajuan berterusan teknologi pembangunan bahagian hadapan, keperluan untuk kesan peralihan yang lancar antara halaman telah menjadi semakin biasa. Vue-Router, sebagai pengurus penghalaan rasmi Vue.js, memberikan kami banyak fungsi yang berkuasa, termasuk peralihan laluan. Artikel ini akan memperkenalkan cara menggunakan peralihan dalam Vue-Router untuk mencapai kesan peralihan yang lancar antara halaman dan memberikan contoh kod khusus.

1. Peralihan penghalaan dalam Vue-Router
Dalam Vue-Router, peralihan penghalaan dilaksanakan melalui komponen peralihan. Komponen peralihan ialah komponen yang disediakan oleh Vue.js yang boleh menukar elemen mengikut keadaan yang berbeza. Kita boleh menggunakan komponen peralihan untuk mencapai kesan peralihan apabila memasuki dan meninggalkan halaman.

2. Konfigurasikan peralihan penghalaan
Untuk mencapai kesan peralihan penghalaan, kita perlu menambah atribut peralihan pada konfigurasi penghalaan dan memberikannya nama. Contohnya:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      name: 'home',
      meta: {
        transition: 'fade'
      }
    },
    {
      path: '/about',
      component: About,
      name: 'about',
      meta: {
        transition: 'slide'
      }
    }
  ]
})

Dalam kod di atas, kami menambahkan medan peralihan pada atribut meta laluan dan menentukan nama kesan peralihan yang berbeza. Dengan cara ini, apabila halaman bertukar, kita boleh mengawal kesan peralihan halaman berdasarkan nama kesan peralihan ini.

3 Tulis gaya untuk kesan peralihan
Dalam HTML, kita boleh menulis gaya untuk kesan peralihan yang berbeza melalui CSS. Contohnya, tulis gaya untuk kesan peralihan pudar:

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

Dalam kod di atas, kami menetapkan masa peralihan kelegapan kepada 0.5 saat melalui atribut peralihan. Gaya .fade-enter dan .fade-leave-to digunakan untuk menetapkan gaya masuk dan keluar elemen Di sini kami menetapkan ketelusan elemen kepada 0.

4. Gunakan kesan peralihan
Untuk menggunakan kesan peralihan, kita perlu menambah nama kelas gaya bagi kesan peralihan mengikut nama kesan peralihan apabila laluan ditukar. Berikut ialah contoh pelaksanaan mudah:

<template>
  <transition :name="transitionName">
    <router-view />
  </transition>
</template>

<script>
export default {
  computed: {
    transitionName() {
      const toRoute = this.$router.currentRoute;
      const fromRoute = this.$router.history.current;
      const toTransition = toRoute.meta.transition;
      const fromTransition = fromRoute.meta.transition;
      const defaultTransition = 'fade';

      return toTransition || fromTransition || defaultTransition;
    }
  }
}
</script>

Dalam kod di atas, kami mengira transitionName secara dinamik melalui atribut yang dikira. Mula-mula, kami mendapat toRoute dan fromRoute semasa, dan kemudian tentukan kesan peralihan yang harus digunakan berdasarkan medan peralihan dalam atribut meta mereka. Jika kedua-duanya tidak dinyatakan, kesan peralihan lalai digunakan.

5. Ringkasan
Melalui konfigurasi dan pelaksanaan langkah di atas, kami boleh menggunakan peralihan laluan dalam Vue-Router untuk mencapai kesan peralihan yang lancar antara halaman. Kami boleh menyesuaikan kesan peralihan yang berbeza mengikut keperluan dan menggunakan komponen peralihan dan CSS untuk melengkapkan kesan animasi tertentu. Saya harap artikel ini telah memberikan sedikit bantuan untuk semua orang memahami dan menggunakan peralihan penghalaan dalam Vue-Router.

Dokumentasi rujukan:

1. Vue-Router Dokumentasi rasmi: https://router.vuejs.org/
2. Vue.js Dokumentasi rasmi: https://vuejs.org/

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