vue-router mempunyai beberapa cangkuk

Terdapat 7 cangkuk: 1. sebelumSetiap; 3. selepasSetiap; 5. sebelumRouteEnter;

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

vue-router Berapa banyak fungsi cangkuk yang ada? Apakah sebenarnya dan apakah proses pelaksanaannya?

Mulakan dengan peta minda.

Analisis

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: Global Guard, Route Guard, Component Guard.

Persediaan persekitaran demonstrasi kod

Mula-mula sediakan persekitaran secara ringkas

index.js

/*
 * @Description:一尾流莺
 * @Date: 2021-03-21 16:17:56
 * @LastEditTime: 2021-07-18 15:14:42
 * @FilePath: \vite-project-js\src\router\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;

main.js

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

Halaman A

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

Halaman B

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

Halaman C

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

Komponen Umum

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

Halaman semasa begini, agak hodoh, cuma tonton sebentar, kami di sini bukan untuk belajar css

Pengawal global

, seperti namanya, ditakrifkan secara global, iaitu, objek index.js dalam router kami.

sebelumSetiap

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

Daftar pengawal hadapan global melalui router.beforeEach.

Parameter

beforeEach Pengawal hadapan global menerima tiga parameter

• ke: Laluan : Objek laluan sasaran yang akan masuk
• dari: Laluan: Objek laluan yang akan ditinggalkan oleh navigasi semasa
• seterusnya: Fungsi: Tertentu Kaedah ini mesti dipanggil jika tidak ia akan menyekat penghalaan.

Nota: next parameter tidak perlu ditambah, tetapi setelah ditambah, ia mesti dipanggil sekali, jika tidak, lompatan penghalaan, dsb. akan berhenti. Beberapa kes kaedah

next（）

• next(): Teruskan ke cangkuk seterusnya dalam perancangan.
• seterusnya(salah): Mengganggu navigasi semasa. Kembali ke alamat yang sepadan dengan laluan from.
• next('/') atau next({ path: '/' }): melompat ke alamat yang berbeza Parameter yang boleh dihantar adalah sama dengan pilihan dalam router.push.
• seterusnya(ralat): Navigasi ditamatkan dan ralat akan dihantar ke router.onError() panggil balik berdaftar.

Mari cetak dua parameter pertama dan lihat ia mengandungi laluan, parameter, maklumat meta, dsb.

Nilai pulangan

• salah: Batalkan navigasi semasa.
• 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 beforeEach pengawal hadapan global. Ia boleh dilihat bahawa lompatan halaman berlaku hanya selepas dua log dicetak dua saat kemudian.

Kecuali beforeEach 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 lompat laluan, semua pengawal dalaman dan adalah tak segerak Penghalaan komponen dicetuskan selepas ia dihuraikan Ia juga dicetuskan setiap kali menavigasi .

Daftarkan pengawal penghuraian global melalui router.beforeResolve.

router.beforeResolve((to, from, next) => {
  next();
})

回调参数，返回值和 beforeEach 一样。也可以定义多个全局解析守卫。

afterEach

全局后置钩子，它发生在路由跳转完成后，beforeEach 和 beforeResolve 之后，beforeRouteEnter（组件内守卫）之前。它同样在 每次导航 时都会触发。

通过 router.afterEach 注册一个全局后置钩子。

这个钩子的两个参数和 beforeEach 中的 to 和 from 一样。然而和其它全局钩子不同的是，这些钩子不会接受 next 函数，也不会改变导航本身。

路由守卫

顾名思义，就是跟路由相关的钩子，我们的路由守卫只有一个，就是 beforeEnter。

beforeEnter

需要在路由配置上定义 beforeEnter 守卫，此守卫只在进入路由时触发，在 beforeEach 之后紧随执行，不会在 params、query 或 hash 改变时触发。

beforeEnter 路由守卫的参数是 to、from、next ，同 beforeEach 一样。

组件守卫

顾名思义，是定义在路由组件内部的守卫。

beforeRouteEnter

路由进入组件之前调用，该钩子在全局守卫 beforeEach 和路由守卫 beforeEnter 之后，全局 beforeResolve 和全局 afterEach 之前调用。

参数包括 to，from，next。

该守卫内访问不到组件的实例，也就是 this 为 undefined，也就是他在 beforeCreate 生命周期前触发。

beforeRouteUpdate

对于 beforeRouteUpdate 来说，this 已经可用了，所以给 next 传递回调就没有必要了。

beforeRouteLeave

对于 beforeRouteLeave 来说，this 已经可用了，所以给 next 传递回调就没有必要了。

总结

完整的导航解析流程

• 导航被触发。

• 在失活的组件里调用 beforeRouteLeave 守卫。

• 调用全局的 beforeEach 守卫。

• 在重用的组件里调用 beforeRouteUpdate 守卫。

• 在路由配置里调用 beforeEnter。

• 解析异步路由组件。

• 在被激活的组件里调用 beforeRouteEnter。

• 调用全局的 beforeResolve 守卫。

• 导航被确认。

• 调用全局的 afterEach 钩子。

• 触发 DOM 更新。

• 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

上面是官方给出的答案，现在我们用流程图来直观的展示一下。

【相关推荐：《vue.js教程》】

Atas ialah kandungan terperinci vue-router mempunyai beberapa cangkuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!