使用beforeEnter()实现动态页面过渡时首次切换颜色异常问题排查

云原生阿岚

2026-8-16

页面过渡首次点击颜色不生效的解决办法

问题根源

首次触发页面过渡时，beforeEnter钩子的执行时机早于选中颜色更新到store的时机，且部分分支返回的过渡配置未包含颜色设置逻辑，导致首次过渡只能使用默认颜色。

修复代码

方案一：统一过渡配置逻辑

把两种分支的返回值统一为包含钩子的对象，确保每次跳转都能获取最新的store颜色：

transition(to, from) {
  return {
    name: 'home',
    mode: '',
    beforeEnter(el) {
      // 直接获取store中最新的颜色值
      el.style.backgroundColor = this.$store.getters.getTransitionHEX;
    }
  };
}

方案二：结合路由元信息传递颜色（更可靠）

在点击卡片跳转时，把选中的颜色同时存入路由元信息，彻底避免store更新与钩子执行的时机冲突：

点击卡片的跳转方法：

goToTargetPage(color) {
  // 更新store颜色
  this.$store.commit('setTransitionHEX', color);
  // 跳转时把颜色存入路由meta
  this.$router.push({
    name: 'referenz', // 目标页面名称
    meta: { transitionColor: color }
  });
}

过渡配置修改：

transition(to, from) {
  return {
    name: 'home',
    mode: '',
    beforeEnter(el) {
      // 优先用路由meta中的颜色， fallback到store值
      el.style.backgroundColor = to.meta.transitionColor || this.$store.getters.getTransitionHEX;
    }
  };
}