Cara menggunakan penghalaan untuk mencapai lompatan halaman dan akses dalam Vue

Cara menggunakan penghalaan untuk mencapai lompatan halaman dan akses dalam Vue

Dalam rangka kerja Vue, penghalaan adalah konsep yang sangat penting mengakses antara halaman yang berbeza dalam Aplikasi Halaman Tunggal boleh direalisasikan. Vue menyediakan vue-router untuk membantu kami menguruskan penghalaan.

1 Pasang dan konfigurasikan vue-router
Pertama, kita perlu menggunakan npm untuk memasang vue-router, buka alat baris arahan dan jalankan arahan berikut:
npm pasang vue-router

Kemudian, dalam fail main.js projek, vue-router perlu diperkenalkan dan diaktifkan. Kodnya adalah seperti berikut:
import Vue dari 'vue'
import VueRouter dari 'vue-router'

Vue.use(VueRouter);

#🎜🎜 #const router = VueRouter baharu({

mod: 'sejarah',
laluan: [

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

]

})
#🎜🎜 Vue({

penghala,

render: h => h(App),
}).$mount('#app')

Dalam di atas kod, kami Pertama, Vue dan VueRouter telah diperkenalkan. Kemudian, gunakan pemalam vue-router melalui Vue.use(VueRouter). Seterusnya, kami menentukan contoh penghala, di mana mod ditetapkan kepada sejarah, iaitu mod penghalaan biasa yang menggunakan API Sejarah HTML5 untuk mengurus perubahan penghalaan. laluan ialah tatasusunan yang digunakan untuk menentukan laluan, nama dan komponen laluan yang sepadan.

2. Laksanakan lompat halaman dan akses

Dalam kod di atas, kami mentakrifkan dua laluan penghalaan, iaitu '/' dan '/about'. Kedua-dua laluan ini masing-masing sepadan dengan dua komponen, di mana komponen Laman Utama sepadan dengan laluan '/' dan komponen Perihal sepadan dengan laluan '/about'.

Dalam komponen Vue, kita boleh menggunakan komponen pautan penghala untuk melaksanakan lompatan penghalaan. Kodnya adalah seperti berikut:

Home

About-link>

Komponen pautan penghala dalam kod di atas akan dipaparkan ke dalam label, memaparkan teks sebagai Laman Utama dan Perihal, dan mencetuskan lompatan penghalaan apabila diklik.

Selain itu, kita boleh menggunakan komponen paparan penghala untuk memaparkan komponen yang sepadan dengan laluan semasa. Kodnya adalah seperti berikut:

Kod di atas akan secara dinamik menjadikan komponen yang sepadan mengikut laluan laluan semasa.

Selain menggunakan komponen pautan penghala dan paparan penghala, kami juga boleh melaksanakan lompatan halaman melalui navigasi laluan terprogram. Kodnya adalah seperti berikut:

// Dalam komponen Vue

this.$router.push('/') // Lompat ke laluan '/'

Atau, kita juga boleh Gunakan laluan bernama untuk melompat ke halaman. Kodnya adalah seperti berikut:

// Dalam komponen Vue

this.$router.push({ name: 'Home' }) // Lompat ke laluan dengan nama 'Home'
#🎜 🎜#Ringkasan
Dalam Vue, melalui pemalam vue-router, kami boleh mencapai lompatan dan akses halaman dengan mudah. Dengan mengkonfigurasi objek penghalaan, mentakrifkan hubungan pemetaan antara laluan penghalaan dan komponen, dan menggunakan komponen pautan penghala dan komponen paparan penghala, navigasi penghalaan dan pemaparan komponen dinamik boleh dilaksanakan dalam halaman. Selain itu, melalui navigasi laluan terprogram, lompatan halaman boleh dilaksanakan berdasarkan keadaan tertentu dalam komponen Vue. Di atas ialah pengenalan ringkas dan contoh kod menggunakan penghalaan dalam Vue untuk mencapai lonjakan halaman dan akses. Harap ini membantu!

Atas ialah kandungan terperinci Cara menggunakan penghalaan untuk mencapai lompatan halaman dan akses dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!