文件連線：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

全域性守衛：我寫了一個 routerIntercopter.js

// 路由攔截器
import router from "./router";

router.beforeEach((to,from,next) => {
    // 路由全域性前置守衛
    console.log(from.path,"---全域性前置守衛--->",to.path);
    next()
});

router.beforeResolve((to,from,next) 
 
=> {
    // 全域性解析守衛
    console.log(from.path,"---全域性解析守衛--->",to.path)
    next()
})

router.afterEach((to,from) => {
    // 全域性後置守衛
    console.log(from.path,"---全域性後置守衛--->",to.path)
})

元件內區域性守衛：

<script>
export default {
    data(){
        return{
            
        }
    },
    beforeRouteEnter(to,from,next){
        
 
// 元件內
        // 在渲染該元件的對應路由被 confirm 前呼叫
        // 不！能！獲取元件例項 `this`
        // 因為當守衛執行前，元件例項還沒被建立
        next(vm => {
            console.log(from.path,"---進入--->",to.path);
        })
    },
    beforeRouteUpdate (to, from, next) {
　　　　　//vue 2.2開始支援
        // 這個鉤子有點異常強大，可以監聽到 params或者query引數放生改變！！！ 之前用watch監聽，存在很多問題，而這個鉤子實在是實用！！ 但是要注意如果params後query沒有發生改變，是不會觸發此鉤子的
 

        // 在當前路由改變，但是該元件被複用時呼叫
        // 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候， 
        // 由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。
        // 可以訪問元件例項 `this`
        console.log(from.path,"---更新--->",to.path);
        next()
    },
    beforeRouteLeave (to, from, next) {
        // 導航離開該元件的對應路由時呼叫
        // 可以訪問元件例項 `this`
        console.log(from.path,"---離開--->",to.path);
        next()
    }
}
</script>

下面來看一下執行順序：

進入此頁面時：

離開此頁面時：

不同引數（params或query不同 頁面切換時）

以上就能很清晰的看出不同情況的執行順序！！

。