描述

vue-router提供的導(dǎo)航跳轉(zhuǎn)或取消的api。

router.beforeEach 切換路由前調(diào)用

router.beforeResolve 組件內(nèi)路由守衛(wèi)解析之后調(diào)用，和beforeEach用法類似

router.afterEach 切換后調(diào)用

全局路由守衛(wèi)有上面3個(gè)，調(diào)用時(shí)機(jī)不同

路由守衛(wèi)都有3個(gè)參數(shù) to,from,next

to：即將前往的route

from：從哪個(gè)route來的

next（）：用于結(jié)束路由 （vue3中可以用，也可以不用，因?yàn)関ue3中路由守衛(wèi)的返回值決定了路由去向）

next（）：確認(rèn)導(dǎo)航，往下走 next（false）終止導(dǎo)航 next（‘/’）前往“/” next（err：Error） 將err傳給router.onError（ ）

router.beforeEach((to, from) => {// ...// 返回 false 以取消導(dǎo)航return false
})

返回值：返回false ： 取消導(dǎo)航 返回一個(gè)對(duì)象 ： {name：’Login‘} 前往該導(dǎo)航地址

獨(dú)享路由守衛(wèi)：針對(duì)單個(gè)router設(shè)置路由守衛(wèi)

const routes = [{path: '/users/:id',component: UserDetails,beforeEnter: (to, from) => {// reject the navigationreturn false},},
]
//直接在路由表中加

組件內(nèi)的路由守衛(wèi)

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

const UserDetails = {template: `...`,beforeRouteEnter(to, from) {// 在渲染該組件的對(duì)應(yīng)路由被驗(yàn)證前調(diào)用// 不能獲取組件實(shí)例 `this` ！// 因?yàn)楫?dāng)守衛(wèi)執(zhí)行時(shí)，組件實(shí)例還沒被創(chuàng)建！},beforeRouteUpdate(to, from) {// 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用// 舉例來說，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 `/users/:id`，在 `/users/1` 和 `/users/2` 之間跳轉(zhuǎn)的時(shí)候，// 由于會(huì)渲染同樣的 `UserDetails` 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。// 因?yàn)樵谶@種情況發(fā)生的時(shí)候，組件已經(jīng)掛載好了，導(dǎo)航守衛(wèi)可以訪問組件實(shí)例 `this`},beforeRouteLeave(to, from) {// 在導(dǎo)航離開渲染該組件的對(duì)應(yīng)路由時(shí)調(diào)用// 與 `beforeRouteUpdate` 一樣，它可以訪問組件實(shí)例 `this`},
}

其他

router.onError（ handler ）：（）= >void

每次導(dǎo)航遇到未被捕獲的錯(cuò)誤時(shí)調(diào)用