vue-router有3导航钩子分别是：全局导航钩子、组件内的导航钩子、路由独享钩子。

1、全局导航钩子

router.beforeEach(to, from, next): 路由改变前的钩子

作用：路由跳转前触发，跳转前进行判断拦截

const router = new Router({ ... })
router.beforeEach((to, from, next) => {
  //
})

参数：

to: 即将要进入的目标路由对象

from: 当前正要离开的路由，也是一个路由对象

next: 一定要调用该方法来resolve这个钩子

outer.beforeResolve : 在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，该钩子函数就被调用

router.afterEach : 路由改变后的钩子

组件内的导航钩子

1）beforeRouteEnter 在进入当前组件对应的路由前调用

2）beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用

3）beforeRouteLeave 在离开当前组件对应的路由前调用

export default {
    data() { ... },
    beforeRouteEnter(to, from, next) {
        ... ...
    }
}

路由独享钩子

可以在路由配置上直接定义 beforeEnter

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

参数：

to：即将要进入的目标路由对象

from：当前导航正要离开的路由对象

next 放行