欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VueRouter導(dǎo)航守衛(wèi)用法詳解

 更新時(shí)間:2017年12月25日 08:47:11   投稿:laozhang  
這篇文章主要介紹了VueRouter導(dǎo)航守衛(wèi)的詳細(xì)用法以及分類介紹,有興趣的朋友學(xué)習(xí)參考下吧。

簡(jiǎn)介

主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。

例如判斷登錄信息:沒登錄全部跳到登錄頁。判斷必要操作是否進(jìn)行沒進(jìn)行的話中斷跳轉(zhuǎn)。

分為三大類:全局守衛(wèi)、路由守衛(wèi)、組件守衛(wèi)

全局守衛(wèi)

beforeEach
beforeResolve
afterEach

路由守衛(wèi)

beforeEnter

組件守衛(wèi)

beforeRouteEnter
  // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
  // 不!能!獲取組件實(shí)例 `this`
  // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前,組件實(shí)例還沒被創(chuàng)建
  雖然無法直接獲取組件實(shí)力
  但是我們可以通過next參數(shù)的回調(diào)函數(shù)獲取到當(dāng)前實(shí)例進(jìn)行操作
  beforeRouteEnter: (to, from, next) => {
    next((vm) => {
      //vm就是當(dāng)前組件實(shí)例
    });
  }
beforeRouteUpdate
  // 在當(dāng)前路由改變,但是該組件被復(fù)用時(shí)調(diào)用
  // 舉例來說,對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候,
  // 由于會(huì)渲染同樣的 Foo 組件,因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
  // 可以訪問組件實(shí)例 `this`
beforeRouteLeave
  // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用
  // 可以訪問組件實(shí)例 `this`

參數(shù)介紹

這些導(dǎo)航守衛(wèi)涉及到的參數(shù):to、from、next

除了全局守衛(wèi)的afterEach只有to和from外其余都有三個(gè)參數(shù)

(摘抄自官網(wǎng))
to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象
from: Route: 當(dāng)前導(dǎo)航正要離開的路由
next: Function: 一定要調(diào)用該方法來 resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
  next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。
  next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了(可能是用戶手動(dòng)或者瀏覽器后退按鈕),那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。
  next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個(gè)新的導(dǎo)航。
  next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例,則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給 router.onError() 注冊(cè)過的回調(diào)。

運(yùn)行機(jī)制

以上就是本次給大家介紹的關(guān)于VueRouter導(dǎo)航守衛(wèi)的全部知識(shí),希望我們整理的內(nèi)容對(duì)你有用,感謝你對(duì)腳本之家的支持。

相關(guān)文章

  • vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式

    vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式

    這篇文章主要介紹了vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 使用vue3指令封裝一個(gè)圖片預(yù)覽功能

    使用vue3指令封裝一個(gè)圖片預(yù)覽功能

    這篇文章主要為大家詳細(xì)介紹了如何使用?vue3?指令封裝一個(gè)后臺(tái)管理系統(tǒng)圖片預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-01-01
  • Vuejs開發(fā)環(huán)境搭建及熱更新【推薦】

    Vuejs開發(fā)環(huán)境搭建及熱更新【推薦】

    Vue.js是目前很火的一個(gè)前端框架,采用MVVM模式設(shè)計(jì),它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。本文重點(diǎn)給大家介紹Vuejs開發(fā)環(huán)境搭建及熱更新的相關(guān)知識(shí),需要的朋友參考下吧
    2018-09-09
  • Vue編譯優(yōu)化實(shí)現(xiàn)流程詳解

    Vue編譯優(yōu)化實(shí)現(xiàn)流程詳解

    編譯優(yōu)化指的是編譯器將模板編譯為渲染函數(shù)的過程中,盡可能多的提取關(guān)鍵信息,并以此指導(dǎo)生成最優(yōu)代碼的過程,優(yōu)化的方向主要是區(qū)分動(dòng)態(tài)內(nèi)容和靜態(tài)內(nèi)容,并針對(duì)不同的內(nèi)容采用不同的優(yōu)化策略
    2023-01-01
  • axios攔截器工作方式及原理源碼解析

    axios攔截器工作方式及原理源碼解析

    這篇文章主要為大家介紹了axios攔截器工作原理源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02
  • Vue3中pinia用法示例

    Vue3中pinia用法示例

    這篇文章主要介紹了Vue3中使用pinia,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-07-07
  • 你知道vue data為什么是一個(gè)函數(shù)

    你知道vue data為什么是一個(gè)函數(shù)

    本篇文章從javascript原型鏈來解釋為什么vue中data必須是一個(gè)函數(shù),解釋一下這部分的原理內(nèi)容,感興趣的朋友跟隨小編一起看看吧
    2021-11-11
  • vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決

    vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決

    這篇文章主要介紹了vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • 使用vue編寫一個(gè)點(diǎn)擊數(shù)字計(jì)時(shí)小游戲

    使用vue編寫一個(gè)點(diǎn)擊數(shù)字計(jì)時(shí)小游戲

    這篇文章主要為大家詳細(xì)介紹了使用vue編寫一個(gè)點(diǎn)擊數(shù)字計(jì)時(shí)小游戲,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-08-08
  • vue2.0使用v-for循環(huán)制作多級(jí)嵌套菜單欄

    vue2.0使用v-for循環(huán)制作多級(jí)嵌套菜單欄

    這篇文章主要介紹了vue2.0制作多級(jí)嵌套菜單欄,主要使用v-for循環(huán)生成一個(gè)多級(jí)嵌套菜單欄,這個(gè)方法應(yīng)用非常廣泛,需要的朋友可以參考下
    2018-06-06

最新評(píng)論