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

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>

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 ,使用 `setup` 语法糖时,父组件可以通过 `ref` 或 `reactive` 创建一个响应式对象,然后将子组件的方法添加到该对象,以便在父组件调用子组件的方法。 以下是一个示例: ```javascript // 子组件 ChildComponent.vue <template> <div> <button @click="childMethod">子组件方法</button> </div> </template> <script> export default { methods: { childMethod() { // 子组件的方法逻辑 } } }; </script> ``` ```javascript // 父组件 ParentComponent.vue <template> <div> <ChildComponent :childMethod="childMethod" /> <button @click="callChildMethod">调用子组件方法</button> </div> </template> <script> import { ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, setup() { const childMethod = ref(null); // 创建一个响应式对象 const callChildMethod = () => { if (childMethod.value) { childMethod.value(); // 在父组件调用子组件的方法 } }; return { childMethod, callChildMethod }; } }; </script> ``` 在父组件的 `setup` 函数,我们创建了一个 `childMethod` 的响应式对象,并将其传递给子组件。然后,我们在父组件定义了一个 `callChildMethod` 的方法,当点击父组件的按钮时,会调用子组件的方法。 注意:在父组件调用子组件的方法时,需要判断 `childMethod.value` 是否存在,以避免在初始化阶段调用未定义的方法。 这样,当在父组件点击 "调用子组件方法" 的按钮时,会触发子组件的 `childMethod` 方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值