真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

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

簡介

10年積累的成都網(wǎng)站建設(shè)、成都做網(wǎng)站經(jīng)驗(yàn),可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你,你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程,更有龍亭免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

主要用來通過跳轉(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
  // 在渲染該組件的對應(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)用
  // 舉例來說,對于一個(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)航離開該組件的對應(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) 路由對象
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 路由對應(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() 注冊過的回調(diào)。

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

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

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


分享文章:VueRouter導(dǎo)航守衛(wèi)用法詳解
地址分享:http://weahome.cn/article/gcpisp.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部