亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue導(dǎo)航守衛(wèi)使用教程詳解

 更新時(shí)間:2023年04月11日 10:32:28   作者:蒲公英想養(yǎng)花  
這篇文章主要介紹了Vue導(dǎo)航守衛(wèi)使用教程,可以向任意給定的導(dǎo)航守衛(wèi)傳遞next,但是next的使用過(guò)程容易出錯(cuò),需要確保next在任何給定的導(dǎo)航守衛(wèi)中都被嚴(yán)格調(diào)用一次

作用:通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航

植入方式:

  • 全局守衛(wèi)
  • 單個(gè)路由獨(dú)享守衛(wèi)
  • 組件級(jí)守衛(wèi)

守衛(wèi)參數(shù)

  • to: 即將要進(jìn)入的目標(biāo)路由
  • from: 當(dāng)前導(dǎo)航即將要離開的路由
  • next(可選): 不傳參默認(rèn)去to路由,傳參可改變目標(biāo)路由

注意:可以向任意給定的導(dǎo)航守衛(wèi)傳遞next,但是next的使用過(guò)程容易出錯(cuò),需要確保next在任何給定的導(dǎo)航守衛(wèi)中都被嚴(yán)格調(diào)用一次。(可以出現(xiàn)多于一次,但是只能在所有邏輯路徑都不重疊的情況,否則鉤子永遠(yuǎn)不會(huì)被解析或者報(bào)錯(cuò))

守衛(wèi)返回值

  • false: 取消當(dāng)前導(dǎo)航
  • 路由地址:導(dǎo)航中斷,跳轉(zhuǎn)到返回的路由地址。(例如:return {name:‘login’}跳轉(zhuǎn)到登陸頁(yè))
  • undefined/true: 導(dǎo)航有效,調(diào)用下一個(gè)導(dǎo)航守衛(wèi)
  • 注意:如果有錯(cuò)誤,會(huì)取消導(dǎo)航并調(diào)用router.onError()

全局守衛(wèi)

全局前置守衛(wèi)

const router = createRouter({...})
router.beforeEach((to, from) => {
})
  • 導(dǎo)航觸發(fā)時(shí),全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用
  • 守衛(wèi)是異步解析執(zhí)行,導(dǎo)航在所有守衛(wèi)resolve完之前一直處于等待

全局解析守衛(wèi)

router.beforeResolve(async to => {
})
  • 在導(dǎo)航被確認(rèn)之前,在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后調(diào)用
  • 是獲取數(shù)據(jù)或避免用戶無(wú)法進(jìn)入頁(yè)面時(shí)執(zhí)行操作的理想位置

全局后置鉤子

router.afterEach((to, from) => {
})
  • 和守衛(wèi)的區(qū)別:不會(huì)接收next函數(shù),也不會(huì)改變導(dǎo)航
  • 作用:分析/更改頁(yè)面標(biāo)題,聲明頁(yè)面等

單個(gè)路由獨(dú)享守衛(wèi)

const routes = [{
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
    },
    // beforeEnter: [removeQuery, removeHash]
}]
  • 只在進(jìn)入路由時(shí)觸發(fā),不會(huì)在params/query/hash改變時(shí)觸發(fā)(如:/user/1 -> /user/2)
  • 傳參:可以傳遞函數(shù)數(shù)組,有利于重用守衛(wèi)

組件級(jí)守衛(wèi)

  • beforeRouteEnter: 在渲染該組件對(duì)應(yīng)路由被驗(yàn)證前調(diào)用,不能獲取this
  • beforeRouteUpdate: 在組件被復(fù)用時(shí)調(diào)用,可以訪問(wèn)this
  • beforeRouteLeave: 在導(dǎo)航離開該組件路由時(shí)調(diào)用,可以訪問(wèn)this

注意:beforeRouteEnter 是支持給 next 傳遞回調(diào)的唯一守衛(wèi)

beforeRouteEnter(to, from, next) {
    next(vm => {
        // 通過(guò)'vm'訪問(wèn)組件實(shí)例
    })
}

離開守衛(wèi):通常用來(lái)預(yù)防用戶在還未保存修改前突然離開,可以通過(guò)返回false來(lái)取消

完整的導(dǎo)航解析流程

  1. 導(dǎo)航被觸發(fā)
  2. 在離開的組件里調(diào)用 beforeRouteLeave 守衛(wèi)
  3. 調(diào)用全局的 beforeEach 守衛(wèi)
  4. (如果是重用組件)調(diào)用 beforeRouteUpdate 守衛(wèi)
  5. 在路由配置里調(diào)用 beforeEnter
  6. 解析異步路由組件
  7. 在被激活的組件里調(diào)用 beforeRouteEnter
  8. 調(diào)用全局的 beforeResolve 守衛(wèi)
  9. 導(dǎo)航被確認(rèn)
  10. 調(diào)用全局的 afterEach 鉤子
  11. 觸發(fā) DOM 更新
  12. 調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù),創(chuàng)建好的組件實(shí)例會(huì)作為回調(diào)函數(shù)的參數(shù)傳入

總結(jié)

全局守衛(wèi)

  • beforeEach
  • beforeResolve
  • beforeAfter:不接收next

單個(gè)路由獨(dú)享守衛(wèi)

  • beforeEnter:路由參數(shù)變化不觸發(fā)

組件級(jí)守衛(wèi)

  • beforeRouteEnter: 不可訪問(wèn)this
  • beforeRouteUpdate:可以訪問(wèn)this
  • beforeRouteLeave:可以訪問(wèn)this

到此這篇關(guān)于Vue導(dǎo)航守衛(wèi)使用教程詳解的文章就介紹到這了,更多相關(guān)Vue導(dǎo)航守衛(wèi)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue-plugin-hiprint 詳細(xì)使用

    vue-plugin-hiprint 詳細(xì)使用

    這篇文章主要介紹了vue-plugin-hiprint 詳細(xì)使用說(shuō)明,使用Vue.Draggable庫(kù)構(gòu)建可拖拽元素的示例,你可以根據(jù)具體需求和技術(shù)選型選擇適合的庫(kù)或方法來(lái)實(shí)現(xiàn)可拖拽元素的功能,需要的朋友可以參考下
    2023-08-08
  • VUE中路由變化this.$router(push\replace\go\back)解讀

    VUE中路由變化this.$router(push\replace\go\back)解讀

    這篇文章主要介紹了VUE中路由變化this.$router(push\replace\go\back),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue 按鍵修飾符處理事件的方法

    Vue 按鍵修飾符處理事件的方法

    這篇文章主要介紹了Vue 按鍵修飾符的相關(guān)資料,vue中新增按鍵修飾符和系統(tǒng)修飾符來(lái)處理類似的事件,具體內(nèi)容詳情大家參考下本文
    2018-05-05
  • vue如何給頁(yè)面增加url前綴

    vue如何給頁(yè)面增加url前綴

    這篇文章主要介紹了vue如何給頁(yè)面增加url前綴問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說(shuō)明

    vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說(shuō)明

    這篇文章主要介紹了vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue環(huán)形進(jìn)度條組件實(shí)例應(yīng)用

    vue環(huán)形進(jìn)度條組件實(shí)例應(yīng)用

    在本文中我們給大家分享了關(guān)于vue環(huán)形進(jìn)度條組件的使用方法以及實(shí)例代碼,需要的朋友們跟著測(cè)試下吧。
    2018-10-10
  • vue 實(shí)現(xiàn)滾動(dòng)到底部翻頁(yè)效果(pc端)

    vue 實(shí)現(xiàn)滾動(dòng)到底部翻頁(yè)效果(pc端)

    這篇文章主要介紹了pc端vue 滾動(dòng)到底部翻頁(yè)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2019-07-07
  • vue 里面使用axios 和封裝的示例代碼

    vue 里面使用axios 和封裝的示例代碼

    本篇文章主要介紹了vue 里面使用axios 和封裝的示例代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2017-09-09
  • vue開發(fā)移動(dòng)端h5環(huán)境搭建的全過(guò)程

    vue開發(fā)移動(dòng)端h5環(huán)境搭建的全過(guò)程

    在正式使用Vue進(jìn)行移動(dòng)端頁(yè)面開發(fā)前,需要做一些前置工作,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)移動(dòng)端h5環(huán)境搭建的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • Vue.js前端框架之事件處理小結(jié)

    Vue.js前端框架之事件處理小結(jié)

    這篇文章主要介紹了Vue.js前端框架之事件處理小結(jié),本文給大家介紹了v-on 指令的基本用法,通過(guò)實(shí)例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-04-04

最新評(píng)論