vue3+setup语法中使用beforeRouteEnter

<script setup> 在官网的介绍中，beforeRouteEnter 无法再其中使用，如果你正在使用组合 API 和 setup 函数来编写组件，你可以通过onBeforeRouteUpdate和onBeforeRouteLeave分别添加 update 和 leave 守卫。

那么我们想使用路由拦截器怎么处理呢，话不多说，直接干货。

1、使用路由独有守卫可以做到

const routes = [ 
    { 
    path: '/users/:id', 
    component: UserDetails, 
    beforeEnter: (to, from) => { reject the navigation return false }
}] 

2、如果不想配置到路由表中，直接在单文件组件中使用呢

<script lang="ts">
    import { defineComponent } from "vue";
    export default defineComponent({
      beforeRouteEnter(to, from, next) {
        if (true) {
          next(false);
        } else {
          next((e) => {});
        }
      },
    });
</script>

3、这个是重点，上述1、2点都是单独使用的情况，如果你正好在使用 <script setup>又想使用beforeRouteEnter，首先就需要分两部分写

第一部分:

<script lang="ts">
    import { defineComponent } from "vue";
    export default defineComponent({
      beforeRouteEnter(to, from, next) {
        if (true) {
          next(false);
        } else {
           // 这里有个重点，如果分两部分写的，数据如何关联呢？
           // 那么我们需要暴露一个去调用 <script setup> 暴露的方法
          next((e) => {
              const data = '一些数据'
              e.beforeRouteEnter(data)
          });
        }
      },
    });
</script>
    

第二部分:

那么我们需要暴露一个关联方法出去

<script setup>
    const beforeRouteEnter = (data)=>{
        //做一些事情
        console.log(data)
    }
    defineExpose({
      beforeRouteEnter,
    });
</script>