---
title: Vue3的setup语法中使用onBeforeRouteEnter
description: Vue3的setup语法中使用onBeforeRouteEnter的思路，借助setup函数中自定义方法onBeforeRouteEnter与组件beforeR
author: chaihongjun
category: frontend
published: 2024-12-28
url: https://chaihongjun.me/frontend/41.html
---

# Vue3的setup语法中使用onBeforeRouteEnter

根据官网文档的介绍，组件的守卫是有beforeRouteEnter，beforeRouteUpdate和beforeRouteLeave。beforeRouteUpdate和beforeRouteLeave可以访问组件实例,所以setup函数中可以使用，而beforeRouteEnter 守卫不能访问，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建，setup函数是在组件创建之前就执行了。如果使用的语法是setup,那么助setup函数中自定义方法onBeforeRouteEnter与组件beforeRouteEnter关联实现。

方法一在路由配置文件中使用：
MDBLOCK0
 方法二在组件文件中(本文重点)：
MDBLOCK1
这里解释一下上半部分代码：

首先通过defineComponent定义了当前的组件，并且在组件守卫中执行了next方法。next方法中回调的参数就是当前组件的实例。当组件守卫beforeRouteEnter执行，并且执行了next方法，这个时候组件实例化完成，组件实例再执行一个组件自定义的方法onBeforeRouteEnter。这个自定义方法携带一个参数：来源路由对象。那么这个自定义方法来自哪里？怎么定义的？

下半部是在setup函数中定义了一个组件的自定义方法。这个setup函数中的方法就是前面组件实例调用的方法，这样两部部分关联了起来。

这里需要注意这个自定义的方法，是需要通过defineExpose暴露出去，这样父组件(defineComponent定义的组件)实例化之后也就是instance，就可以调用这个方法。

这样巧妙的就可以在<script setup> 语法或者setup()函数中调用onBeforeRouteEnter，,相当于调用beforeRouteEnter。

---

> 本文首发于 [chaihongjun.me | 柴宏俊 web 技术学习笔记](https://chaihongjun.me/frontend/41.html)，采用 CC BY-NC-ND 4.0 协议，转载请保留出处与链接。