總結(jié)：
1、導(dǎo)航守衛(wèi)那些？
全局 afterEach、beforeEach 狭郑、beforeResolve
路由beforeEnter
組件內(nèi)：beforeRouteLeave 、beforeRouteUpdate 汇在、beforeRouteEnter
2:導(dǎo)航守衛(wèi)中的next的用處翰萨？next的作用，使導(dǎo)航守衛(wèi)隊(duì)列的繼續(xù)向下迭代
3:為什么afterEach守衛(wèi)沒(méi)有next糕殉？afterEach根本不在導(dǎo)航守衛(wèi)隊(duì)列內(nèi)亩鬼，沒(méi)有迭代的next
4:beforeEach是否可以疊加？beforeEach是可以疊加的阿蝶，所有的全局前置守衛(wèi)按順序存放在beforeHooks的數(shù)組里面
全局導(dǎo)航守衛(wèi)
router.beforeEach((to, from, next) => {
// 導(dǎo)航守衛(wèi)：當(dāng)用戶沒(méi)有登錄時(shí)辛孵，限制用戶不能訪問(wèn)某些頁(yè)面等?
??// ...})
router.afterEach((to, from) => {
??// ...})
路由導(dǎo)航守衛(wèi)
beforeEnter: (to, from, next) => {
console.log('%c 路由獨(dú)享守衛(wèi)', 'color:blue')
console.log(to, from)
next()
}
組件內(nè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)建
可以通過(guò)以下方式訪問(wèn)組件實(shí)例
? ?next(vm => {
? ? ? // 通過(guò) `vm` 訪問(wèn)組件實(shí)例
? ? ?})
??},
??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`
??}
每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：
to: Route: 即將要進(jìn)入的目標(biāo)?路由對(duì)象
from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由
next: Function: 一定要調(diào)用該方法來(lái)?resolve?這個(gè)鉤子。執(zhí)行效果依賴?next?方法的調(diào)用參數(shù)飞蛹。
? ? ?1谤狡、 next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了卧檐，則導(dǎo)航的狀態(tài)就是?confirmed?（確認(rèn)? ? ? ? 的）墓懂。
? ? ?2、 next(false): 中斷當(dāng)前的導(dǎo)航霉囚。如果瀏覽器的 URL 改變了（可能是用戶手動(dòng)或者瀏覽器后退按鈕）捕仔，那么 URL 地址會(huì)重置到?from?路由對(duì)應(yīng)的地址。
? ? 3盈罐、 next('/')?或者?next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址榜跌。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航盅粪。
? ? ?4钓葫、next(error): (2.4.0+) 如果傳入?next?的參數(shù)是一個(gè)?Error?實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給?router.onError()?注冊(cè)過(guò)的回調(diào)票顾。確保要調(diào)用?next?方法础浮，否則鉤子就不會(huì)被 resolved。
使用? ?當(dāng)用戶沒(méi)有登錄時(shí)库物，限制用戶不能訪問(wèn)某些頁(yè)面等?
router.beforeEach((to, from, next) => {? ?
? if (to.meta) {
? ? if (to.meta.title) {
? ? ? document.title = to.meta.title
? ? }
? } else {
? ? document.title = '我的項(xiàng)目'
? }
? if (to.matched.some(record => record.meta.requiresAuth)) {
? ? let user = store.getters.getUser
? ? if (!user.isSignIn) {
? ? ? next({
? ? ? ? path: '/login',
? ? ? ? replace: true,
? ? ? ? query: {
? ? ? ? ? redirect: to.fullPath
? ? ? ? }
? ? ? })
? ? }
? ? next()
? }
? next()
})
