vue路由钩子介绍

路由钩子主要用来拦截导航，在钩子里可以跳转到指定的页面或取消跳转。

• 路由参数或者查询的改变不会触发导航守卫！。 *可以通过watch观察$route对象来应对这些变化，或用beforeRouteUpdate的组件内守卫。

1. 全局前置守卫

1.1 beforeEach

router.beforeEach((to, from, next) => {

})

当一个导航触发时，全局前置守卫按照创建的顺序调用。守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于* 等待中 *。

每个守卫方法接收三个参数：

• to：到哪去（正要进入的路由）；

• from: 从哪来（正要离开的路由）；

• next: 如果是next()就完成跳转到to指示的路由；如果参数为false则取消此次导航；如果参数是地址或路由对象则调到指定的地址或对象。

• 确保一定要调用next 方法，否则钩子就不会被resolve。 *

2. 独享路由钩子

2.1 beforeEnter

const router = new VueRouter({
    routes: [
        {
            path: '/foo',
            component: Foo,
            beforeEnter: (to, from, next) => {

            }
        }
    ]
})

3. 组件路由钩子

3.1 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

data () {
    return {}
},
beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被确认前调用，不能获取组件示例this，因为当守卫执行前，组件的实例还没被创建。
},
beforeRouteUpdate (to, from, next) {
    // 当路由发生改变，但是该组件被复用时调用。也就是路由参数或者查询改变时。
    // 举例：对于一个动态参数的路径/foo/:id，当从 /foo/1 跳转到 /foo/2 时被调用。由于会渲染同一个组件，因此组件实例会被复用。所以这个钩子会在这个情况下被调用。
    // 可以访问组件this
},
beforeRouteLeave (to, from, next) {
    // 离开该组件的对应路由时调用。
    // 可以访问组件this
}

• beforeRouteEnter不能访问this，但是可以通过传给next一个回调函数来访问组件实例，在导航被确认的时候会执行回调。并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
    next(vm => {
        // 通过vm访问组件实例
    })
}

• beforeRouteLeave通常用來禁止用戶在还未保存修改前突然离开。该导航可以通过next(false)来取消跳转。