Bagaimana untuk menggunakan penghalaan dalam Vue untuk mencapai kesan peralihan apabila menukar halaman?

Bagaimana untuk menggunakan penghalaan dalam Vue untuk mencapai kesan peralihan apabila menukar halaman?

Dengan perkembangan teknologi bahagian hadapan, animasi penukaran halaman, sebagai bahagian penting dalam meningkatkan pengalaman pengguna, semakin banyak digunakan dalam aplikasi web. Dalam rangka kerja Vue, kami boleh melaksanakan penukaran halaman melalui penghalaan, dan menggabungkannya dengan kesan peralihan Vue untuk mencapai kesan animasi apabila menukar halaman. Artikel ini akan memperkenalkan cara menggunakan penghalaan dan kesan peralihan Vue untuk mencapai kesan peralihan penukaran halaman.

Mula-mula, kita perlu memasang pemalam penghalaan Vue. Masukkan arahan berikut pada baris arahan untuk memasang:

npm install vue-router

Selepas pemasangan, perkenalkan Vue dan Vue-router ke dalam fail kemasukan projek (main.js), dan buat contoh Vue-router. Kodnya adalah seperti berikut:

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

Seterusnya, kita perlu mengkonfigurasi penghalaan. Buat fail index.js di bawah folder penghala dan konfigurasikan maklumat penghalaan di dalamnya. Berikut ialah contoh:

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

Dalam proses mengkonfigurasi penghalaan, kita boleh mencapai hubungan yang sepadan antara penghalaan dan halaman dengan menentukan laluan, nama dan komponen. Contohnya, dalam kod di atas: apabila mengakses laluan akar, komponen Laman Utama akan dipaparkan apabila mengakses laluan /about, komponen Perihal akan dipaparkan.

Seterusnya, kita perlu menggunakan teg dalam App.vue untuk memaparkan komponen yang sepadan dengan laluan. Kodnya adalah seperti berikut:

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

Pada ketika ini, kita sudah boleh menukar halaman melalui penghalaan. Tetapi jika kita ingin menambah kesan peralihan untuk penukaran halaman, maka kita perlu menggunakan kesan peralihan Vue.

Dalam App.vue, kami boleh menggunakan komponen Vue untuk menambah kesan peralihan kepada penukaran halaman. Mula-mula, bungkus komponen di luar teg

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

Dalam kod di atas, kami Atribut kelegapan ditetapkan untuk gaya .fade-enter dan .fade-leave-active, dan atribut peralihan ditetapkan untuk gaya .fade-enter-active dan .fade-leave-active .

Akhir sekali, tambahkan atribut utama pada komponen Kod adalah seperti berikut:

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

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

Dengan menambahkan atribut utama, Vue akan menentukan sama ada kesan peralihan diperlukan berdasarkan perubahan. daripada kunci.

Pada ketika ini, kami telah melaksanakan kesan peralihan apabila menukar halaman. Apabila kami mengklik pada pautan navigasi untuk menukar halaman, halaman akan pudar masuk dan keluar, meningkatkan pengalaman pengguna.

Untuk meringkaskan, kita boleh menggunakan penghalaan dan kesan peralihan Vue untuk mencapai kesan peralihan apabila menukar halaman. Mula-mula, kita perlu memasang dan mengkonfigurasi pemalam penghalaan Vue, dan kemudian menggunakan komponen dalam App.vue untuk menambah kesan peralihan untuk penukaran halaman. Dengan menetapkan atribut utama untuk komponen Tentukan gaya kesan peralihan dalam teg