vue路由鉤子函數有2種,分別為:1、全域守衛(全域鉤子函數),指的是「index.js」中的router物件;2、路由守衛(針對單一路由鉤子函數);3、組件守衛(組件級鉤子函數),是定義在路由組件內部的守衛。
本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。
vue-router
的 鉤子函數 ,其實說的就是 導航守衛 。
引用官網的話
「導航」 表示路由正在改變。
vue-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");
頁面A
<template> <div> <h1>我是页面A啊</h1> <comp></comp> </div> </template>
#頁面B
<template> <div> <h1>我是页面B啊</h1> <comp></comp> </div> </template>
#頁面C
<template> <div> <h1>我是页面C啊</h1> <comp></comp> </div> </template>
通用元件
<template> <div>我是公用组件啊</div> </template>
目前頁面是這樣的,有點醜,湊活看吧,咱也不是來學習css
的
顧名思義,是要定義在全域的,也就是我們index.js
中的router
物件。
全域前置守衛,在路由跳轉前觸發,它在 每次導航 時都會觸發。
透過 router.beforeEach
註冊一個全域前守衛。
beforeEach
全域前置守衛接收三個參數
注意: next
參數可以不添加,但是一旦添加,則必須呼叫一次,否則路由跳轉等會停止。
next()
方法的幾種情況
from
路由對應的位址。 router.push
中選項一致。 router.onError()
註冊過的回呼。 我們把前兩個參數印出來看一下,裡麵包含路徑,參數,元資訊等內容。
全域前置守衛可以定義多個,依照建立順序呼叫。在所有守衛完成之前導航一直處於等待中。
下面這個例子我們就定義了兩個 beforeEach
全域前置守衛。可以看到,只有在兩秒以後分別列印出兩個日誌後才進行頁面的跳躍。
除了beforeEach
全域前置守衛之外,其他的全域守衛都可以定義多個,並且在所有守衛完成之前導航一直處於等待中,其他的鉤子函數就不進行演示了。
全域解析守衛,在路由跳轉前,所有元件內守衛 和非同步路由元件 被解析之後觸發,它同樣在每次導航 時都會觸發。
透過 router.beforeResolve
註冊一個全域解析守衛。
router.beforeResolve((to, from, next) => { next(); })
回呼參數,傳回值和 beforeEach
一樣。也可以定義多個全域解析守衛。
全域後置鉤子,它發生在路由跳轉完成後,beforeEach
和beforeResolve
之後,beforeRouteEnter
(元件內守衛)之前。它同樣在 每次導航 時都會觸發。
透過 router.afterEach
註冊一個全域後置鉤子。
這個鉤子的兩個參數和 beforeEach
中的 to
和 from
一樣。然而和其它全局鉤子不同的是,這些鉤子不會接受 next
函數,也不會改變導航本身。
顧名思義,就是跟路由相關的鉤子,我們的路由守衛只有一個,就是 beforeEnter
。
需要在路由配置上定義beforeEnter
守衛,此守衛只在進入路由時觸發,在beforeEach
之後緊接著執行,不會在params
、query
或hash
改變時觸發。
beforeEnter
路由守衛的參數是to
、from
、next
,同beforeEach
一樣。
顧名思義,是定義在路由元件內部的守衛。
路由進入元件之前調用,該鉤子在全域守衛beforeEach
和路由守衛beforeEnter
之後,全域beforeResolve
和全域afterEach
之前呼叫。
參數包含 to
,from
#,next
。
該守衛內存取不到元件的實例,也就是 this
為 undefined
,也就是他在 beforeCreate
生命週期前觸發。
對於beforeRouteUpdate
來說,this
已經可用了,所以給next
傳遞回呼就沒有必要了。
對於beforeRouteLeave
來說,this
已經可用了,所以給next
傳遞回呼就沒有必要了。
- 導航被觸發。
- 在失活的元件裡呼叫
beforeRouteLeave
守衛。- 呼叫全域的
beforeEach
守衛。- 在重複使用的元件裡呼叫
beforeRouteUpdate
守衛。- 在路由配置裡呼叫
beforeEnter
。- 解析非同步路由元件。
- 在被啟動的元件裡呼叫
beforeRouteEnter
。- 呼叫全域的
beforeResolve
守衛。- 導航被確認。
- 呼叫全域的
afterEach
鉤子。- 觸發
DOM
更新。- 呼叫
beforeRouteEnter
守衛中傳給next
的回呼函數,建立好的元件實例會作為回呼函數的參數傳入。
上面是官方給的答案,現在我們用流程圖來直覺的展示一下。
相關推薦:《vue.js教學》
以上是vue路由鉤子函數有幾種?分別是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!