vue路由導(dǎo)航守衛(wèi)：導(dǎo)航守衛(wèi)通俗來(lái)說(shuō)就是utr跳轉(zhuǎn)的監(jiān)聽(tīng)，當(dāng)a跳轉(zhuǎn)到b的過(guò)程執(zhí)行的函數(shù)

導(dǎo)航守衛(wèi)的使用方法

首先定義個(gè)實(shí)例，然后在使用實(shí)例調(diào)用鉤子函數(shù)

router.beforeEach( (to,from,next)=>{

})

to和from里面包含的信息

fullPath:?"/HelloWorld?name=linlin&age=3"

hash:?""

matched:?[{…}]

meta:?{title:?"你好世界"}

name:?undefined

params:?{}

path:?"/HelloWorld"

query:?{name:?"linlin",?age:?"3"}

全局路由導(dǎo)航守衛(wèi)

beforeEach：前置鉤子函數(shù)，在路由跳轉(zhuǎn)之前執(zhí)行的函數(shù) ，必須要有next（函數(shù)）

afterEach：后置鉤子，在路由跳轉(zhuǎn)玩執(zhí)行

beforeResolve：同beforeEach

組件路由導(dǎo)航守衛(wèi)

beforeRouteEnter(to,from,next){// 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用// 不！能！獲取組件實(shí)例 `this`// 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建},

beforeRouteUpdate(to,from,next){// 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用// 舉例來(lái)說(shuō)，對(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)用。// 可以訪問(wèn)組件實(shí)例 `this`},

beforeRouteLeave(to,from,next){// 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用// 可以訪問(wèn)組件實(shí)例 `this`}

路由獨(dú)享的守衛(wèi)

beforeEnter? 必須包含next()函數(shù)才能執(zhí)行跳轉(zhuǎn)執(zhí)行后面的頁(yè)面