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>