Penjelasan terperinci tentang kaedah lompat penghalaan penghala vue

Vue ialah rangka kerja JavaScript popular yang menyediakan banyak ciri berguna, termasuk Penghala Vue. Vue Router ialah pengurus penghalaan yang disyorkan secara rasmi yang boleh membantu anda membuat aplikasi satu halaman (Aplikasi Halaman Tunggal). Penghala Vue menyediakan pelbagai kaedah lompat laluan, dan artikel ini akan memperkenalkan kaedah ini.

1. Lompat laluan melalui pautan penghala

Penghala Vue menyediakan pautan penghala komponen untuk melaksanakan pautan lompat Kami boleh tentukan dalam Atribut komponen untuk menetapkan penghalaan sasaran alamat, kodnya adalah seperti berikut:

<router-link to="/home">Home</router-link>

Kod di atas menunjukkan melompat ke halaman dengan alamat penghalaan /home.

Kami juga boleh memasukkan pembolehubah ke dalam nilai atribut kepada, supaya penghalaan dinamik boleh dicapai. Contohnya:

<router-link :to="&#39;/user/&#39; + userId">User</router-link>

Apabila nilai userId berubah, sasaran lompatan juga akan berubah dengan sewajarnya.

2. Lompatan laluan dilaksanakan melalui penghala.push

Penghala Vue menyediakan penghala kaedah global.tekan untuk melaksanakan lompatan laluan Kami boleh meneruskannya dalam komponen kaedah $router.push, kodnya adalah seperti berikut:

this.$router.push('/home')

Kod di atas menunjukkan melompat ke halaman dengan alamat penghalaan /home.

Kami juga boleh melepasi objek dalam kaedah tolak untuk melaksanakan lompatan dinamik laluan. Contohnya:

this.$router.push({ path: '/user', query: { userId: 123 }})

Kod di atas bermaksud untuk melompat ke halaman dengan alamat penghalaan /pengguna dan membawa parameter pertanyaan dalam url.

3. Lompat laluan melalui router.replace

Vue Router menyediakan router.replace kaedah global untuk melaksanakan lompat laluan Berbeza daripada router.push, router.replace tidak akan keluar rekod sejarah semasa melompat. Kodnya adalah seperti berikut:

this.$router.replace('/home')

Sama seperti kaedah tolak, kita boleh lulus objek dalam kaedah ganti untuk melaksanakan lompatan dinamik laluan.

4. Lompatan laluan melalui router.go

Vue Router menyediakan router.go kaedah global untuk melaksanakan lompatan laluan, yang boleh digulung ke belakang atau halaman Maju dalam sejarah. Kodnya adalah seperti berikut:

this.$router.go(-1)

Kod di atas bermaksud kembali ke satu halaman.

5. Laksanakan pengawal laluan melalui penghala.beforeEach

Apabila kita perlu melakukan satu siri operasi sebelum lompatan penghalaan, Vue Router menyediakan pengawal laluan beforeEach.

Kita boleh mentakrifkan fungsi beforeEach dalam konfigurasi penghalaan global Fungsi ini akan dilaksanakan sebelum setiap lompat laluan Kod adalah seperti berikut:

router.beforeEach((to, from, next) => {
  // ...
})

Parameter kepada mewakili maklumat penghalaan. untuk dilompat. Parameter dari mewakili maklumat penghalaan halaman semasa, dan kaedah seterusnya ialah fungsi panggil balik yang digunakan untuk memberitahu sama ada lompatan penghalaan selesai atau cara melompat.

Kami boleh mengesahkan kebenaran pengguna, status log masuk, dll. dalam fungsi beforeEach, dan memutuskan untuk melompat atau menyekat lompatan berdasarkan hasil pengesahan.

6. Laksanakan pengawal laluan melalui penghala.afterEach

Selain fungsi beforeEach, Vue Router juga menyediakan pengawal laluan global selepasEach, yang turut menerima dua parameter: ke dan dari. Perbezaannya ialah fungsi afterEach dilaksanakan selepas lompatan laluan selesai.

Kami boleh mengemas kini status halaman atau melakukan operasi lain dalam fungsi afterEach.

Di atas adalah pelbagai kaedah routing jump yang disediakan oleh Vue Router. Setiap satunya sesuai untuk senario yang berbeza. Kita boleh memilih untuk menggunakannya mengikut keperluan sebenar. Perlu dinyatakan bahawa semasa proses pembangunan, kita boleh melihat semua maklumat penghalaan Penghala Vue dalam konsol penyemak imbas, yang sangat membantu untuk penyahpepijatan dan pembangunan.

Atas ialah kandungan terperinci Penjelasan terperinci tentang kaedah lompat penghalaan penghala vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!