记录:vue3 组合式api页面内使用beforeRouteEnter 组件内前置守卫

场景：

APP/h5/第三方h5 多端页面交互 来回套娃式跳转

返回上一级需要判断路由from参数

vue3无法使用beforeRouterEnter

解决办法：

第一种:

写一个新的script标签，在setup外使用beforeRouterEnter方法

<script lang="ts">
 //使用接口继承ComponentPublicInstance 增加getSOME（指定）方法
interface VmInstance extends ComponentPublicInstance {
    getSOME(): void
}
export default defineComponent({
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            //将vm赋值 as 新的类型
            const instance = vm as VmInstance
            console.log(from)//获取form判断路由来源
            //调用指定的方法或者根据需要进行逻辑判断操作
            instance.getSOME()
        })
    }
})
// beforeRouteEnter
</script>
<script lang="ts" setup>
//引入defineComponent,ComponentPublicInstance
import { defineComponent, ComponentPublicInstance } from "vue"
const getSOME = () => {
   //进行某种操作
}

defineExpose({ getSOME })
</script>

第二种：

使用defineOptions

<script lang="ts" setup>
//引入ComponentPublicInstance
import { ComponentPublicInstance } from "vue"
//使用接口继承ComponentPublicInstance 增加getSOME（指定）方法
interface VmInstance extends ComponentPublicInstance {
    getSOME(): void
}
//在defineOptions中使用beforeRouteEnter
defineOptions({
    inheritAttrs: false,
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            const v = vm as VmInstance
            //调用指定的方法或者根据需要进行逻辑判断操作
            v.getSOME()
        })
    }
})
const getSOME = () => {
   //进行某种操作
}
defineExpose({ getSOME })
</script>

注意:当前组件需要暴露指定方法

defineExpose({ getSOME })