vue组件的路由钩子函数beforeRouteEnter，局部拦截

最新推荐文章于 2025-04-20 22:52:36 发布

周凤伟

最新推荐文章于 2025-04-20 22:52:36 发布

阅读量2.6k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_44139784/article/details/104217036

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细解析了Vue.js中beforRouteEnter钩子函数的工作原理，阐述了在组件实例化前如何通过next回调函数访问组件实例，进行权限判断及页面跳转等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

beforeRouteEnter

beforeRouteEnter 函数内部 this 是undefined，因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；先执行beforRouteEnter，再执行组件周期钩子函数beforeCreate。我们可以通过 next 获取组件的实例对象，如：next( (vm)=>{} )，参数vm就是组件的实例化对象。

<script>
    export default {
        data(){
            return {
                test:'改变之前'
            }
        },
        beforeCreate(){//组件生命周期函数
            console.log('beforeCreate')
        },
        //当进入组件之前，执行 beforRouteEnter 路由钩子函数
        beforeRouteEnter(to,from,next){
            console.log('beforRouteEnter')
            console.log(this) // 结果为undefined，因为在执行beforRouteEnter时候，组件还没有被创建出来；先执行beforRouteEnter，再执行beforeCreate
            next((vm)=>{ //参数vm就是当前组件的实例。
            	console.log(vm.test) // 改变之前
            	// 在这里面去判断用户是否登录，没有登陆就跳走
            	vm.$router.push('/login')
            })
        }
    }
</script>