vue3 组件内判断是从哪个页面过来的

最新推荐文章于 2025-05-07 18:10:38 发布

画了五官的猕猴

最新推荐文章于 2025-05-07 18:10:38 发布

阅读量2.9k

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/luoxiaonuan_hi/article/details/135499793

版权

文章介绍了在Vue3的ScriptSetup中由于缺少beforeRouteEnter钩子，如何通过使用optionsAPI和defineExpose方法来实现路由守卫。作者提供了在beforeRouteEnter中处理不同路径逻辑并从顶层获取数据的示例。

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

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

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
 
onBeforeRouteLeave((to,from)=>{
    console.log(to,from)
})
 
onBeforeRouteUpdate((to,from)=>{
    console.log(to,from)
})
</script>

解决方案

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

使用 <script setup> 的组件是默认关闭的，组件实例使用不到顶层的数据和函数。
需要配合 defineExpose 暴露给组件实例使用，暴露的响应式数据会自动解除响应式。

<script>
import { defineComponent } from 'vue'
export default defineComponent({
    beforeRouteEnter(to, from, next) {
        if (from.path == '/nav') {
            // sessionStorage.setItem('sign', true)
            next(vm => {
                vm.getUseorderlist ();
            })
        } else if (from.path.includes('/records-details')) {
            // sessionStorage.setItem('sign', false)
            next()
        }
        next()
    },
})
</script>

<script setup>
const getUseorderlist = async () => {
    console.log('getUseorderlist ')
}
defineExpose({ getUseorderlist })
</script>