如何在router-view外的组件中页面过渡后调用方法？

我希望在App.vue的子组件ChildComponent.vue中，在页面过渡完成后调用一个方法。我使用VueRouter重新渲染<router-view>内的内容，但ChildComponent.vue不在<router-view>中，路由变化时不会被重新创建。当前方案是在ChildComponent.vue中监听$route触发函数，但该函数会在路由变化（<router-view>动画触发、内容替换前）执行，无法访问下一页内容。使用setTimeout依赖动画时长，并非最佳实践。

现有组件代码 #

App组件 #

<template>
    <ChildComponent />
    <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
            <component :is="Component"/>
        </transition>
    </router-view>
</template>

<script>
import { ChildComponent } from "./components";
export default {
    name: "App",
    components: {
        ChildComponent,
    },
};
</script>

ChildComponent组件 #

<template>
    <div>Child component</div>
</template>

<script>
export default {
    mounted() {
        this.test();
    },

    watch: {
        '$route'(to, from) {
            this.test()
        }
    },

    methods: {
        test(){
            console.log("next page");
        }
    },
};
</script>

利用Vue过渡组件提供的after-enter事件，该事件会在新页面的过渡动画完全结束后触发，无需依赖动画时长。通过父子组件通信，让App组件在过渡完成后通知ChildComponent执行目标方法。

修改步骤 #

1. 修改App.vue：给<transition>绑定@after-enter事件，同时给ChildComponent添加ref引用，在事件回调中调用ChildComponent的方法。
2. 调整ChildComponent：移除对$route的监听（如果不需要路由变化时提前执行逻辑），保留mounted中的初始化调用。

修改后的App.vue #

<template>
    <ChildComponent ref="childComponent" />
    <router-view v-slot="{ Component }">
        <!-- 绑定after-enter事件，过渡完成后触发回调 -->
        <transition name="fade" mode="out-in" @after-enter="onTransitionComplete">
            <component :is="Component"/>
        </transition>
    </router-view>
</template>

<script>
import { ChildComponent } from "./components";
export default {
    name: "App",
    components: {
        ChildComponent,
    },
    methods: {
        onTransitionComplete() {
            // 通过ref调用ChildComponent的test方法
            this.$refs.childComponent.test();
        }
    }
};
</script>

修改后的ChildComponent.vue #

<template>
    <div>Child component</div>
</template>

<script>
export default {
    mounted() {
        // 页面首次加载时执行
        this.test();
    },

    methods: {
        test(){
            console.log("next page");
            // 此时新页面已渲染完成，可以正常访问下一页内容
        }
    },
};
</script>

方案优势 #

• 完全基于Vue官方API，稳定性高，无需依赖硬编码的动画时长
• after-enter事件精准触发于过渡动画完成时刻，确保能访问到新页面的DOM内容
• 实现逻辑简洁，父子组件通信直接明了

内容的提问来源于stack exchange，提问作者dencs