vue-router有哪几种导航钩子

第一种全局导航钩子

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

这三个参数 to 、from 、next 分别的作用：

• 1.to: Route，代表要进入的目标，它是一个路由对象
• 2.from: Route，代表当前正要离开的路由，同样也是一个路由对象
• 3.next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数

1.next()：进入管道中的下一个钩子，如果全部的钩子执行完了，则导航的状态就是 confirmed（确认的）
2.next(false)：这代表中断掉当前的导航，即 to 代表的路由对象不会进入，被中断，此时该表 URL 地址会 
    被重置到 from 路由对应的地址
3.next(‘/’) 和 next({path: ‘/’})：在中断掉当前导航的同时，跳转到一个不同的地址
 4.next(error)：如果传入参数是一个 Error 实例，那么导航被终止的同时会将错误传递给 router.onError() 注册过的回调

第二种组件内导航钩子

组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、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
        // 导航离开该组件的对应路由时被调用
    }
}

第三种单独路由独享组件

即单个路由独享的导航钩子，它是在路由配置上直接进行定义的：

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