Vue-Router路由钩子函数(导航守卫)

@Vue-Router路由钩子函数(导航守卫)

Vue-Router路由钩子函数(导航守卫)

路由钩子函数有三种：
1：全局钩子： beforeEach、 afterEach
2：单个路由里面的钩子： beforeEnter、 beforeLeave
3:组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

全局守卫

router.beforeEach() 进入之前触发

router.afterEach() 进入之后触发
每个守卫方法接收三个参数：

①to: Route: 即将要进入的目标路由对象（to是一个对象，是将要进入的路由对象，可以用to.path调用路由对象中的属性）

②from: Route: 当前导航正要离开的路由

③next: Function: 这是一个必须需要调用的方法，执行效果依赖 next 方法的调用参数。

beforeEach（全局前置守卫）

使用 router.beforeEach 注册一个全局前置守卫

afterEach（全局后置钩子）

和守卫不同的是， afterEach不会接受 next 函数也不会改变导航本身

路由独享的守卫(单个路由独享的)

写在路由配置中，只有访问到这个路径，才能触发钩子函数

组件级路由钩子

写在组件中,访问路径，即将渲染组件的时候触发的

{
data,
methods
beforeRouteEnter(){
        this 不指向实例 组件还没创建
        next((vm) =>{
                vm就是实例
        })
}
beforeRouteUpdate(){}
beforeRouteLeave(){}
}

beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
离开守卫beforeRouteLeave()通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。