路由導(dǎo)航守衛(wèi)有哪些：
全局守衛(wèi)
組件內(nèi)守衛(wèi)
獨(dú)享守衛(wèi)
1.全局守衛(wèi)
beforeEach 全局前置守衛(wèi)
beforeResolve 全局解析守衛(wèi)
afterEach 全局后置守衛(wèi)
在創(chuàng)建實(shí)例的過(guò)程中，我們可以定義全局守衛(wèi)：
2.獨(dú)享守衛(wèi)
beforeEnter 就是放到routes中定義的：
const routes = [
?? ?{
?? ??? ?name: 'user',
?? ??? ?component: User
?? ??? ?beforeEnter: (to, from) => {
?? ??? ??? ?
?? ??? ?}
?? ?}
]
//beforeEnter: [removeQueryParams, removeHash], 可以接受函數(shù)數(shù)組，removeQueryParams，removeHash為自定義的函數(shù)
注意點(diǎn)是獨(dú)享守衛(wèi)在路由參數(shù)改變但是路由本身地址沒(méi)有變化的情況下是不會(huì)再次觸發(fā)的。
3.組件內(nèi)守衛(wèi)
beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
beforeRouteEnter: 組件對(duì)應(yīng)路由被驗(yàn)證前調(diào)用，不能獲取組件實(shí)例this
beforeRouteUpdate：在當(dāng)前組件路由改變時(shí)，但是組件本身被復(fù)用時(shí)調(diào)用?？梢栽L問(wèn)this。
beforeRouteLeave：在導(dǎo)航離開(kāi)當(dāng)前組件路由時(shí)調(diào)用，可以訪問(wèn)this
Vue3中setup 中調(diào)用可以通過(guò)api onBeforeRouteUpdate和onBeforeRouteLeave分別添加update和leave守衛(wèi)
注意一個(gè)事情是beforeRouteEnter中如果想要拿到this實(shí)例可以通過(guò)next回調(diào)函數(shù)
beforeRouteEnter: (to, from, next) => {
?? ?next(vm => { //這里vm相當(dāng)于組件實(shí)例this，可以正常訪問(wèn)到組件內(nèi)數(shù)據(jù)
?? ??? ??? ?
?? ?})
}
但是next回調(diào)被調(diào)用時(shí)已經(jīng)時(shí)組件路由被讀取解析并記錄后才調(diào)用的，就是如果你要在回調(diào)中去重定向路由，那么你當(dāng)前頁(yè)面的路由也是在路由記錄中的。
完整的導(dǎo)航解析流程：
1.已經(jīng)失活的組件調(diào)用beforeRouteLeave
2.調(diào)用全局前置守衛(wèi)beforeEach
3.調(diào)用復(fù)用組件的beforeRouteUpdate
4.在路由配置里調(diào)用beforeEnter
5.解析異步路由組件
6.調(diào)用被激活組件內(nèi)beforeRouteEnter
7.調(diào)用全局解析守衛(wèi)beforeResolve
8.導(dǎo)航被確認(rèn)
9.調(diào)用全局后置守衛(wèi)afterEach
10.觸發(fā)Dom更新
12.調(diào)用beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)，創(chuàng)建好的組件實(shí)例會(huì)作為回調(diào)函數(shù)的參數(shù)傳入
綜上所述，Vue Router中的導(dǎo)航守衛(wèi)是非常靈活且強(qiáng)大的功能，我們可以使用全局守衛(wèi)、路由守衛(wèi)和組件內(nèi)守衛(wèi)，來(lái)實(shí)現(xiàn)各種自定義的邏輯。在日常開(kāi)發(fā)中，我們可以根據(jù)具體需求，靈活運(yùn)用這些守衛(wèi)，以達(dá)到更好的用戶體驗(yàn)和功能實(shí)現(xiàn)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-744385.html
總結(jié)起來(lái)，導(dǎo)航守衛(wèi)是Vue Router中非常重要的功能，它可以幫助我們?cè)诼酚汕袚Q過(guò)程中做一些自定義的邏輯處理。通過(guò)全局守衛(wèi)、路由守衛(wèi)和組件內(nèi)守衛(wèi)，我們可以實(shí)現(xiàn)各種各樣的功能，例如路由攔截、權(quán)限驗(yàn)證、路由切換動(dòng)畫(huà)等。在實(shí)際項(xiàng)目開(kāi)發(fā)中，合理使用導(dǎo)航守衛(wèi)，能夠提高開(kāi)發(fā)效率和用戶體驗(yàn)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-744385.html
到了這里，關(guān)于路由導(dǎo)航守衛(wèi)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
