vue3 setup 使用 beforeRouteEnter 组件内路由守卫

setup 中只有onBeforeRouteLeave、onBeforeRouteUpdate两个钩子函数，
没有beforeRouteEnter对应的钩子函数，所以无法在setup中直接使用

<script setup>
onBeforeRouteLeave((to, from) => {// 在导航离开渲染该组件的对应路由时调用// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`// 钩子没有调用是因为 这个路由是直接输入路由路径进入的，为路由数组中的第一个，没有上一级，所以这个钩子没有调用console.log('beforeRouteLeave');user.value = {id: '',name: ''};
});onBeforeRouteUpdate((to, from) => {// 在当前路由改变，但是该组件被复用时调用// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，// 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`console.log('beforeRouteUpdate');user.value = users.filter(user => user.id === to.params.id)[0];
});
</script>

解决方案：
使用选项式api 并使用defineExpose 将defineComponent中需要使用到的响应式数据暴露
就可以使用onBeforeRouteLeave了

<script>
import {defineComponent} from "vue";export default defineComponent({beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被验证前调用// 不能获取组件实例 `this` ！// 因为当守卫执行时，组件实例还没被创建！console.log('beforeRouteEnter');next(function (vm) {// console.log(vm)vm.user = vm.users.filter(user => user.id === to.params.id)[0];});}
});
</script><script setup>
import {reactive, ref} from "vue";
import {onBeforeRouteLeave, onBeforeRouteUpdate, useRouter} from "vue-router";const users = reactive([{id: '1',name: 'user1'},{id: '2',name: 'user2'},{id: '3',name: 'user3'},
]);const user = ref({id: '',name: ''
});
defineExpose({users, user});const router = useRouter();
const bru = () => {router.push({// path: '3',params: {id: '3'}});
}const back = () => {router.back();
}
onBeforeRouteLeave((to, from) => {// 在导航离开渲染该组件的对应路由时调用// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`// 钩子没有调用是因为 这个路由是直接输入路由路径进入的，为路由数组中的第一个，没有上一级，所以这个钩子没有调用console.log('beforeRouteLeave');user.value = {id: '',name: ''};
});onBeforeRouteUpdate((to, from) => {// 在当前路由改变，但是该组件被复用时调用// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，// 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`console.log('beforeRouteUpdate');user.value = users.filter(user => user.id === to.params.id)[0];
});
</script>
<template><div><h1>User</h1><h1 v-text="user.name"></h1><button type="button" @click="bru">beforeRouteUpdate</button><button type="button" @click="back">beforeRouteLeave</button></div>
</template><style scoped></style>