vue-router中存在三個鉤子，也叫hook，生命週期，守衛等。

1、全域性守衛

2、路由獨享守衛

3、元件獨享守衛

全域性守衛：頁面載入時候觸發，一般控制全域性許可權

const router = new VueRouter();
// 全域性前置守衛
router.beforeEach((to, from, next) => {
    ...
    next(); //所有前置守衛最後都需要呼叫next()進入下一個管道
})

// 全域性後置守衛，沒有next
router.afterEach((to, from) => {
    ...
})

// 全域性前置解析守衛，和router.beforeEach類似，在所有元件內守衛以及非同步路由元件解析完後觸發
router.beforeResolve((to, from, next) => {
    ...
    next();
})
 

路由獨享守衛：它是在route檔案中使用，引數和全域性守衛一樣

// beforeEnter和afterEnter
const router = new VueRouter({
    routes: [
        path: '/',
        component: Demo,
        beforeEnter: (to, from, next) => {
            ...
            next();
        },
        afterEnter: (to, from, next) => {
            ...
            next();
        }
    ]
})
 

元件獨享守衛：它是在index.vue檔案中使用，引數和全域性守衛一樣

const Demo = {
    template: `...`,
    // beforeRouteEnter是拿不到當前元件的this，元件還沒被建立，需要通過next(vm => {})回傳
    beforeRouteEnter (to, from, next) {
        ...
        next();
    },
    // 當前路由改變並且該元件得到複用是呼叫，如/demo/:id,在/demo/1切換/demo/2，demo被複用，會觸發。
    beforeRouteUpdate (to, from, next) {
        ...
        next();
    }，
    beforeRouteLeave (to, from, next) {
        ...
        next();
    }
}
 

使用場景：

1、路由進入前最典型的可以做一些許可權控制，路由離開時可以清除或儲存一些資訊/任務等。

2、前置守衛不能拿到當前元件的this，可以通過next的引數進行回傳this。

3、前置守衛必須呼叫next()方法，否則不會進入下一個管道。