Vue3 beforeRouteEnter怎么用？和Composition API的onMounted比有啥优势？

Vue3 beforeRouteEnter到底是个啥？

别急着敲代码，咱们先从场景感入手——你有没有遇到过这种情况：点进某个商品详情页前，必须先拿到这个商品的完整数据，不然页面白屏或者乱跳骨架屏；或者打开个人中心页，要先判断用户有没有登录权限，没登的话直接跳转登录页，这些路由跳转前/切换到该路由组件挂载前要做的事，Vue3 beforeRouteEnter刚好能处理。

它是Vue Router 4（因为Vue3必须配Router4哈，别搞混）提供的一个组件级路由守卫，生命周期节点卡在「路由解析完成（比如参数、query全拿到）」和「组件实例创建（beforeCreate）」之间，注意这个节点哦！这是它和其他组件内守卫最大的区别,后面讲优势的时候会重点说。

Vue3 beforeRouteEnter的基本写法，分两种场景

有些同学刚从Vue2转来，或者只学过Composition API，可能会懵：它在setup里不能直接用吗？哎，对，刚才说了节点问题——setup执行的时候组件实例还没出生呢，setup里的生命周期钩子都是绑定在实例上的，所以beforeRouteEnter只能放在组件的Option API选项里，或者用Vue Router4官方推荐的defineProps/defineEmits之外的另一个组合式API小工具？不对，等下，Router4的组合式API守卫只有onBeforeRouteLeave、onBeforeRouteUpdate，onBeforeRouteEnter真没有！这点一定要记住,别瞎试半天找不到问题。

那分两种写法说清楚：

场景1：普通的同步/异步逻辑，不需要访问组件实例

这时候最简单，直接在组件根对象（不管你写