Berapakah jenis fungsi cangkuk penghalaan vue yang ada? Apakah perbezaannya?

Terdapat 2 jenis fungsi cangkuk penghalaan Vue, iaitu: 1. Pengawal global (fungsi cangkuk global), yang merujuk kepada objek penghala dalam "index.js" 2. Pengawal penghalaan (untuk penghalaan tunggal fungsi cangkuk) ); 3. Pengawal komponen (fungsi cangkuk peringkat komponen) ialah pengadang yang ditakrifkan di dalam komponen penghalaan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

vue-routerfungsi cangkuk sebenarnya merujuk kepada Pengawal Navigasi.

Memetik tapak web rasmi

“Navigasi” menunjukkan bahawa penghalaan sedang berubah. Pengawal navigasi yang disediakan oleh

vue-router digunakan terutamanya untuk menjaga navigasi dengan melompat atau membatalkan. Terdapat berbilang peluang untuk membina proses navigasi laluan: secara global, eksklusif untuk satu laluan, atau pada peringkat komponen.

Iaitu: Pengawal global (fungsi cangkuk global) , Pengadang penghalaan (untuk fungsi cangkuk penghalaan tunggal) , Pengadang komponen (komponen fungsi cangkuk aras) .

Pembinaan persekitaran demonstrasi kod

Sediakan persekitaran secara ringkas dahulu

index.js

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/a',
      component: () => import('../components/A.vue'),
    },
    {
      path: '/b',
      component: () => import('../components/B.vue'),
    },
    {
      path: '/c',
      component: () => import('../components/C.vue'),
    },
  ],
});
export default router;

utama . > Halaman C

// index.js
import router from "./router"; 
createApp(App).use(router).mount("#app");

Komponen Biasa

<template>
  <div>
    <h1>我是页面A啊</h1>
    <comp></comp>
  </div>
</template>

Halaman sekarang macam ni, agak hodoh, tengok saja untuk suka-suka, kami bukan di sini untuk mempelajari

<template>
  <div>
    <h1>我是页面B啊</h1>
    <comp></comp>
  </div>
</template>

pengawal global

, seperti namanya, akan ditakrifkan secara global, iaitu,

<template>
  <div>
    <h1>我是页面C啊</h1>
    <comp></comp>
  </div>
</template>

objek dalam

kami. beforeEach

<template>
  <div>我是公用组件啊</div>
</template>

Pengadang hadapan global, dicetuskan sebelum lompat laluan, ia akan dicetuskan setiap kali

navigasicss.

Daftar pengawal hadapan global melalui .

index.jsParameterrouter

Pengawal hadapan global menerima tiga parameter

ke: Laluan

: Objek laluan sasaran yang akan masuk

router.beforeEach

dari: Laluan

: Objek laluan yang akan ditinggalkan oleh navigasi semasa

seterusnya: Fungsi

: Tertentu Kaedah ini mesti dipanggil jika tidak ia akan menyekat penghalaan.

beforeEach

Nota:
• parameter tidak perlu ditambah, tetapi setelah ditambah, ia mesti dipanggil sekali, jika tidak, lompatan penghalaan, dsb. akan berhenti. Beberapa kes kaedah
• next(): Teruskan ke cangkuk seterusnya dalam perancangan.

seterusnya(salah):

Mengganggu navigasi semasa. Kembali ke alamat yang sepadan dengan laluan . next

next('/') atau next({ path: '/' }):

melompat ke alamat yang berbeza Parameter yang boleh dihantar adalah sama dengan pilihan dalam next（）.

• seterusnya(ralat): Navigasi ditamatkan dan ralat akan dihantar ke panggil balik berdaftar.
• Mari cetak dua parameter pertama dan lihat ia mengandungi laluan, parameter, maklumat meta, dsb. from
• Nilai pulanganrouter.push
• salah: Batalkan navigasi semasa. router.onError()
null, undefined, true atau return terus

: Panggil pengawal navigasi seterusnya.

Tentukan berbilang pengawal

Berbilang pengawal hadapan global boleh ditakrifkan dan dipanggil mengikut susunan penciptaan. Navigasi sedang menunggu sehingga semua pengawal selesai.

Dalam contoh berikut, kami mentakrifkan dua

pengawal hadapan global. Ia boleh dilihat bahawa lompatan halaman berlaku hanya selepas dua log dicetak dua saat kemudian.
Kecuali

pengawal hadapan global, pengawal global lain boleh ditakrifkan, dan semua pengawal telah selesai Sebelum ini, navigasi telah menunggu, dan fungsi cangkuk lain tidak akan ditunjukkan.

beforeResolve

Pengawal resolusi global, sebelum lompatan penghalaan, semua

pengawal dalam komponenbeforeEach dan

komponen penghalaan tak segerak

dicetuskan selepas ia dihuraikan, ia adalah sama Dipecat setiap kali dilayari

.

Daftarkan pengawal penghuraian global melalui

.

beforeEach

parameter panggil balik, nilai pulangan adalah sama dengan

. Ia juga mungkin untuk menentukan beberapa pengawal penghuraian global.

afterEach

Kait tiang global, ia berlaku selepas lompatan laluan selesai, selepas beforeEach dan beforeResolve, dan sebelum beforeRouteEnter (pengawal dalam komponen). Ia juga menyala setiap kali anda menavigasi.

Daftar posthook global melalui router.afterEach.

Dua parameter cangkuk ini adalah sama seperti beforeEach dan to dalam from. Walau bagaimanapun, tidak seperti cangkuk global yang lain, cangkuk ini tidak akan menerima fungsi next dan juga tidak akan menukar navigasi itu sendiri.

Pengawal Laluan

Seperti namanya, ia adalah cangkuk yang berkaitan dengan penghalaan Kami hanya mempunyai satu pengawal laluan, iaitu beforeEnter.

sebelumEnter

perlu mentakrifkan pengawalan beforeEnter pada konfigurasi penghalaan ini hanya dicetuskan apabila memasuki laluan Ia akan dilaksanakan serta-merta selepas beforeEach dan tidak akan dilaksanakan selepas params atau atau query berubah. hash

Parameter pengawal laluan ialah beforeEnter, to, from, sama seperti next. beforeEach

Pengawal komponen

Seperti namanya, ia adalah pengawal yang ditakrifkan di dalam komponen penghalaan.

sebelumRouteEnter

dipanggil sebelum laluan memasuki komponen ini dipanggil selepas pengawal global

dan pengawal laluan beforeEach, global beforeEnter dan global Dipanggil sebelum beforeResolve. Parameter afterEach

termasuk

, to, from. next

Instance komponen tidak boleh diakses dalam pengawal ini, iaitu,

ialah this, iaitu, ia dicetuskan sebelum undefined kitaran hayat. beforeCreate

beforeRouteUpdate

Untuk

, beforeRouteUpdate sudah tersedia, jadi tidak perlu menghantar panggilan balik ke this. next

beforeRouteLeave

Untuk

, beforeRouteLeave sudah tersedia, jadi tidak perlu menghantar panggilan balik ke this. next

Ringkasan

Proses penghuraian navigasi lengkap

Navigasi dicetuskan.
1. Panggil
2. pengawal dalam komponen yang dinyahaktifkan. beforeRouteLeave
memanggil pengawal
3. global. beforeEach
Panggil
4. pengawal dalam komponen yang digunakan semula. beforeRouteUpdate
Panggil
5. dalam konfigurasi penghalaan. beforeEnter
Selesaikan komponen penghalaan tak segerak.
6. Panggil
7. dalam komponen yang diaktifkan. beforeRouteEnter
memanggil pengawal
8. global. beforeResolve
Navigasi disahkan.
9. memanggil cangkuk
10. global. afterEach
mencetuskan
11. kemas kini. DOM
memanggil fungsi panggil balik yang diserahkan kepada
12. dalam pengawal beforeRouteEnter, dan tika komponen yang dibuat akan dihantar masuk sebagai parameter fungsi panggil balik. next

Di atas ialah jawapan rasmi Sekarang kami menggunakan carta alir untuk menunjukkannya secara intuitif.

Cadangan berkaitan: "

tutorial vue.js"

Atas ialah kandungan terperinci Berapakah jenis fungsi cangkuk penghalaan vue yang ada? Apakah perbezaannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!