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

m0_49827178

已于 2023-12-27 17:50:51 修改

阅读量4.2k

点赞数 2

分类专栏： web前端文章标签： vue.js javascript 前端 vue 学习

于 2023-09-21 17:11:35 首次发布

本文链接：https://blog.csdn.net/m0_49827178/article/details/133139532

版权

web前端专栏收录该内容

8 篇文章

订阅专栏

文章介绍了在Vue3的组合式API下，由于beforeRouteEnter不再可用，针对APP/h5/第三方H5页面间的套娃式跳转，提供了两种解决方案：一是使用script标签并在setup外定义beforeRouteEnter，二是利用defineOptions在组件定义中实现前置守卫。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录: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>

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