vue-router有三种导航钩子

1：全局导航钩子，是在所有组件内守卫和异步路由组件被解析之后（导航被确认之前）调用

2：单个路由共享的，路由配置上直接定义

3：组件内的钩子，组件内部直接定义

参数：

to=>代表要进入的目标

from=>代表当前正要离开的路由

next=>必须需要调用,否则钩子函数无法 resolved，是一个function，进行管道中的一个钩子，如果执行完了，那导航的状态就是 confirmed（确认的），否则为false，终止导航

第一种方式 ：全局导航钩子

1：前置首卫beforeEach

2：后置钩子afterEach,没有next函数，不会改变导航本身

const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
    // do someting
});
router.afterEach((to, from) => {
    // do someting
});

第二种方式 路由独享的钩子

cont router = new VueRouter({
    routes: [
        {
            path: '/file',
            component: File,
            beforeEnter: (to, from ,next) => {
                // do someting
            }
        }
    ]
});

第三种方式 组件里的路由钩子

1：beforeRouteEnter 执行时间 ==> 渲染该组件的对应路由被 confirm 之前;

2：beforeRouteUpdate 执行时间 ==> 当前路由已经改变，但是依然渲染该组件时

3：beforeRouteLeave 执行时间 ==> 导航离开该组件的对应路由时

const File = {
    template: `<div>This is file</div>`,

    beforeRouteEnter(to, from, next) {

        // do someting

        // 在渲染该组件的对应路由被 confirm 前调用

    },

    beforeRouteUpdate(to, from, next) {

        // do someting

        // 在当前路由改变，但是依然渲染该组件是调用

    },

    beforeRouteLeave(to, from ,next) {

        // do someting

        // 导航离开该组件的对应路由时被调用

    }

}