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 975b587bf85a482ea10b0a28848e78a4 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 cafda773a3e42827d5d9338abf905240 Vue untuk menambah kesan peralihan kepada penukaran halaman. Mula-mula, bungkus komponen cafda773a3e42827d5d9338abf905240 di luar teg 975b587bf85a482ea10b0a28848e78a4

<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 975b587bf85a482ea10b0a28848e78a4 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 cafda773a3e42827d5d9338abf905240 dalam App.vue untuk menambah kesan peralihan untuk penukaran halaman. Dengan menetapkan atribut utama untuk komponen 975b587bf85a482ea10b0a28848e78a4 Tentukan gaya kesan peralihan dalam teg c9ccee2e6ea535a969eb3f532ad9fe89 sebagai contoh, tetapkan atribut kelegapan dan atribut peralihan dalam gaya .fade. Akhir sekali, kami boleh menyesuaikan kesan peralihan yang berbeza mengikut keperluan untuk meningkatkan pengalaman pengguna.

Saya harap artikel ini akan membantu anda memahami cara menggunakan penghalaan dalam Vue untuk mencapai kesan peralihan apabila menukar halaman Soalan dan pertukaran dialu-alukan.

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