Vue 2.6.12 如何在组件内定义路由转场完成的生命周期钩子

核心思路 #

当前场景下的两个典型痛点：

• 路由组件的mounted生命周期触发时机和转场动画启动同步，早于动画完全结束，无法满足“转场结束后执行业务”的时机要求
• 直接在外层transition标签绑定after-enter事件的方案，虽然时机正确，但所有业务逻辑都需要写在父级路由容器中，需要通过路由路径判断分支处理不同页面的逻辑，耦合性极高

解决方案的核心是：把「转场完成的时机判断」收敛在通用外层容器，把「转场完成后的业务执行」完全下放到每个路由组件自身，实现逻辑解耦。

具体实现步骤 #

1. 改造外层路由容器，保留通用的转场时机监听 #

外层不再硬编码具体业务逻辑，只负责监听转场完成事件、分发给当前渲染的路由组件：

<!-- 核心路由容器结构 -->
<v-main>
  <transition 
    name="content-toggle" 
    mode="out-in"
    @after-enter="handleTransitionFinished"
  >
    <!-- 利用router-view的作用域插槽获取当前渲染的路由组件 -->
    <router-view v-slot="{ Component, route }">
      <!-- 给每个路由组件绑定动态ref，方便外层定位实例 -->
      <component 
        :is="Component"
        :ref="`route-page-${route.path}`"
      />
    </router-view>
  </transition>
</v-main>

在外层容器的methods中新增通用的事件分发逻辑：

methods: {
  // 只做通用的转场完成事件分发，不写任何具体页面业务
  handleTransitionFinished() {
    // out-in模式下同一时间仅存在一个激活的路由组件实例，直接匹配对应的ref
    const refKeys = Object.keys(this.$refs).filter(key => key.startsWith('route-page-'))
    if (!refKeys.length) return
    const currentPageInstance = this.$refs[refKeys[0]]
    // 如果当前页面组件内部定义了转场完成钩子，就直接调用
    if (currentPageInstance && typeof currentPageInstance.onPageTransitionEnd === 'function') {
      currentPageInstance.onPageTransitionEnd()
    }
  }
}

2. 在每个路由组件内部自定义转场完成逻辑 #

所有需要在转场结束后执行业务的页面，不需要修改外层容器的任何代码，只要在自身组件的methods中定义onPageTransitionEnd方法即可，方法会在转场完全结束时被自动触发。

举个页面组件的示例：

<!-- 示例：用户列表页 src/views/UserList.vue -->
<template>
  <div class="user-list">
    <!-- 页面渲染内容 -->
  </div>
</template>

<script>
export default {
  name: 'UserListPage',
  methods: {
    // 组件内部自定义的转场完成钩子，无需外部手动调用
    onPageTransitionEnd() {
      // 在这里写转场结束后要执行的业务逻辑
      // 比如加载列表数据、聚焦搜索输入框、上报页面浏览埋点等
      this.fetchUserList()
    },
    async fetchUserList() {
      // 具体业务逻辑
    }
  }
}
</script>

方案优势 #

• 触发时机完全匹配需求：和直接在外层transition绑定after-enter的触发时机完全一致，就是新组件转场动画完全播放结束的时刻，不会早于动画触发（不会和mounted时机重合）
• 逻辑完全解耦：外层只维护通用的转场分发逻辑，所有具体业务逻辑都收敛在对应的路由组件内部，不会出现父组件堆积一堆路由判断分支的问题
• 兼容现有转场配置：完全支持当前项目的out-in模式、自定义content-toggle淡入滑动转场效果，不需要调整原有CSS动画规则
• 适配Vue 2.6.12版本：所有用到的API（router-view作用域插槽、动态ref、transition事件钩子）都是该版本原生支持的能力，无额外依赖

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