前端只是总结（五）：vue-router钩子介绍-CSDN博客

本文链接：https://blog.csdn.net/John_jian_yo/article/details/106710469

全局

　　全局守卫包括：router.beforeEach、router.beforeResolve、router.afterEach；

　　routerbeforeEach：全局前置守卫，在进入路由之前触发；

　　router.beforeResolve：全局解析守卫，在 beforeRouterEnter 调用之后调用，是在 2.5.0 版本提出的；

　　router.afterEach：全局后置钩子，在进入路由之后触发；

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

})

　to 和 from 参数是将要进入和将要离开的路由对象，路由对象是指平时我们通过 this.$router 获取到的路由对象；next：function 是个函数，且必须要调用，否则不能进入路由，其中 next() 进入该路由；next(false) 取消进入该路由，url 地址重置为 from 路由地址，也就是将要离开的路由地址；next 跳转新路由，当前导航被中断，重新开始一个新的导航；

独享

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

            }
        }
    ]
})

参数用法什么的都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖

组件内

data () {
    return {}
},
beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被确认前调用，不能获取组件示例this，因为当守卫执行前，组件的实例还没被创建。
},
beforeRouteUpdate (to, from, next) {
    // 当路由发生改变，但是该组件被复用时调用。也就是路由参数或者查询改变时。
    // 可以访问组件this
},
beforeRouteLeave (to, from, next) {
    // 离开该组件的对应路由时调用。
    // 可以访问组件this
}