Vue-Router導(dǎo)航守衛(wèi)：
有的時(shí)候，我們需要通過(guò)路由來(lái)進(jìn)行一些操作六敬，比如最常見的登錄權(quán)限驗(yàn)證碘赖，當(dāng)用戶滿足條件時(shí)，才讓其進(jìn)入導(dǎo)航外构，否則就取消跳轉(zhuǎn)普泡，并跳到登錄頁(yè)面讓其登錄。
為此我們有很多種方法可以植入路由的導(dǎo)航過(guò)程：全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的,推薦優(yōu)先閱讀路由文檔
全局守衛(wèi)
vue-router全局有三個(gè)守衛(wèi)：
1.router.beforeEach 全局前置守衛(wèi) 進(jìn)入路由之前
2.router.beforeResolve 全局解析守衛(wèi)(2.5.0+) 在beforeRouteEnter調(diào)用之后調(diào)用
3.router.afterEach 全局后置鉤子 進(jìn)入路由之后
使用方法：
// main.js 入口文件
import router from './router'; // 引入路由
router.beforeEach((to, from, next) => {
next();
});
router.beforeResolve((to, from, next) => {
next();
});
router.afterEach((to, from) => {
console.log('afterEach 全局后置鉤子');
});
to,from,next 這三個(gè)參數(shù)：
to和from是將要進(jìn)入和將要離開的路由對(duì)象,路由對(duì)象指的是平時(shí)通過(guò)this.$route獲取到的路由對(duì)象典勇。next:Function 這個(gè)參數(shù)是個(gè)函數(shù)劫哼，且必須調(diào)用，否則不能進(jìn)入路由(頁(yè)面空白)割笙。
-- next() 進(jìn)入該路由权烧。
-- next(false): 取消進(jìn)入路由，url地址重置為from路由地址(也就是將要離開的路由地址)伤溉。
-- next 跳轉(zhuǎn)新路由般码，當(dāng)前的導(dǎo)航被中斷，重新開始一個(gè)新的導(dǎo)航乱顾。
我們可以這樣跳轉(zhuǎn)：next('path地址')或者next({path:''})或者next({name:''})
且允許設(shè)置諸如 replace: true板祝、name: 'home' 之類的選項(xiàng)
以及你用在router-link或router.push的對(duì)象選項(xiàng)。
路由獨(dú)享守衛(wèi)
如果你不想全局配置守衛(wèi)的話走净，你可以為某些路由單獨(dú)配置守衛(wèi)：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// 參數(shù)用法什么的都一樣,調(diào)用順序在全局前置守衛(wèi)后面券时，所以不會(huì)被全局守衛(wèi)覆蓋
// ...
}
}
]
})
路由組件內(nèi)的守衛(wèi)：
1.beforeRouteEnter 進(jìn)入路由前
2.beforeRouteUpdate (2.2) 路由復(fù)用同一個(gè)組件時(shí)
3.beforeRouteLeave 離開當(dāng)前路由時(shí)
文檔中的介紹：
beforeRouteEnter (to, from, next) {
// 在路由獨(dú)享守衛(wèi)后調(diào)用 不孤里！能！獲取組件實(shí)例 `this`橘洞，組件實(shí)例還沒被創(chuàng)建
},
beforeRouteUpdate (to, from, next) {
// 在當(dāng)前路由改變捌袜，但是該組件被復(fù)用時(shí)調(diào)用 可以訪問組件實(shí)例 `this`
// 舉例來(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)用霍衫。
},
beforeRouteLeave (to, from, next) {
// 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用，可以訪問組件實(shí)例 `this`
}
