Vue $router页面进入/离开动画：JavaScript回调偶发不触发问题

嘿，我之前也碰到过类似的Vue路由动画回调不稳定的问题，这种“同代码却有不同表现”的情况确实让人摸不着头脑！咱们一步步拆解可能的原因，再给出针对性的解决办法：

1. 路由守卫的时机与调用方式错误 #

这是最常见的坑，尤其是beforeRouteEnter和beforeRouteLeave的使用逻辑：

• beforeRouteEnter钩子执行时，组件实例还没创建，必须通过next(vm => { ... })的回调才能访问组件实例，直接写this.xxx会报错或无响应。
  正确示例：

  beforeRouteEnter(to, from, next) {
    // 用next的回调获取组件实例，再触发动画
    next(vm => {
      vm.runEnterAnimation();
    });
  }
  

• beforeRouteLeave如果涉及异步动画，一定要等动画完成后再调用next()，否则路由会直接跳转，动画回调被中断：

  beforeRouteLeave(to, from, next) {
    // 假设leaveAnimation是返回Promise的异步动画
    this.runLeaveAnimation().then(() => {
      next(); // 动画完成后再允许路由跳转
    });
  }
  

2. <keep-alive>缓存导致钩子不触发 #

如果你的页面组件被<keep-alive>包裹，mounted/beforeDestroy这类生命周期钩子只会执行一次，后续跳转时不会再触发，自然动画也不会重复执行：

• 解决办法：把进入动画移到activated钩子，离开动画移到deactivated钩子，同时结合路由守卫做补充：

  activated() {
    // 每次组件被激活（从缓存中恢复）时执行进入动画
    this.runEnterAnimation();
  },
  deactivated() {
    // 每次组件被缓存时执行离开动画
    this.runLeaveAnimation();
  }
  

• 若不需要某些页面缓存，可以用<keep-alive exclude="PageName1,PageName2">指定排除的组件。

3. 同路由参数变化未触发动画 #

如果是同一路由下的参数变化（比如/user/:id从1变2），组件不会重新渲染，路由守卫也不会触发，导致动画失效：

• 解决办法：监听$route变化，手动触发动画：

  watch: {
    $route(to, from) {
      // 确认是同路由参数变化的场景
      if (to.path === from.path) {
        this.runEnterAnimation();
      }
    }
  }
  

4. 动画函数的状态冲突 #

复杂JS动画如果没有做好状态重置，可能会因为上一次动画未完成导致下一次回调失效：

• 建议在动画开始前重置元素状态，比如：

  runEnterAnimation() {
    // 先重置元素的初始状态（比如透明度、位移）
    this.$refs.pageContainer.style.opacity = '0';
    // 再执行动画逻辑，这里用Promise包裹确保状态可控
    return new Promise(resolve => {
      // 示例用GSAP，你可以替换成自己的动画逻辑
      gsap.to(this.$refs.pageContainer, {
        opacity: 1,
        x: 0,
        duration: 0.6,
        onComplete: resolve
      });
    });
  }
  

5. 调试小技巧 #

如果还是找不到差异，可以给每个页面的路由钩子、动画函数加console.log，对比生效和不生效页面的输出：

• 看看哪些页面的钩子根本没触发
• 检查路由配置里的meta、嵌套路由结构有没有差异
• 确认组件是否有自定义的beforeCreate/created钩子干扰了路由守卫的执行

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