vue3 setup 使用beforeRouteEnter

setup钩子函数

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

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';

onBeforeRouteLeave((to,from)=>{
    console.log('onBeforeRouteLeave',to,from)
})

onBeforeRouteUpdate((to,from)=>{
    console.log('onBeforeRouteUpdate',to,from)
})
</script>

解决方案

Tips：使用选项式api，就可以使用beforeRouterEnter这个钩子，但需要调用页面函数

<script>
import {defineComponent} from 'vue'
export default defineComponent({
    beforeRouteEnter(to, from, next){
        console.log('beforeRouteEnter',to,from)
        next(vm=>{
            vm.getInfo();
        })
    }
})
</script>
<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';

onBeforeRouteLeave((to,from)=>{
    console.log('onBeforeRouteLeave',to,from)
})

onBeforeRouteUpdate((to,from)=>{
    console.log('onBeforeRouteUpdate',to,from)
})

const getInfo = ()=>{
    console.log('get info')
}
defineExpose({getInfo})
</script>