Nuxt路由切换时nuxt-child组件transition过渡效果不生效问题

DevOps 小满

2026-10-1

Nuxt子路由过渡效果失效问题排查及解决方案

问题根因

过渡属性配置位置错误：在父级index.vue的组件选项中声明transition: 'fade'，该配置仅作用于父页面自身的路由进出过渡，不会对<nuxt-child>挂载的子路由组件生效
过渡样式作用域限制：将过渡样式写在scoped的style块中，scoped样式会自动添加唯一属性后缀，Vue动态生成的过渡类名无法匹配到对应样式
缺少transition组件包裹：<nuxt-child>本身不会自动集成过渡能力，需要手动在外层包裹Vue的<transition>组件才能触发过渡逻辑

修复方案

修改后的完整index.vue代码如下：

<template>
  <div>
    <nuxt-link to="/one">one</nuxt-link>
    <nuxt-link to="/two">two</nuxt-link>
    <nuxt-link to="/three">three</nuxt-link>
    <!-- 手动包裹transition组件，指定过渡名称和切换模式 -->
    <transition name="fade" mode="out-in">
      <nuxt-child :key="$route.fullPath"></nuxt-child>
    </transition>
  </div>
</template>
<script>
export default {
  // 删除原有的transition配置，该配置对嵌套子路由无效
  data(){
    return {
    }
  },
}
</script>
<!-- 去掉scoped属性，让过渡样式全局生效 -->
<style>
.fade-enter-active, .fade-leave-active{
    transition: all 1s;
}
.fade-enter, .fade-leave-to{
    opacity: 0;
}
.fade-leave, .fade-enter-to{
    opacity: 1;
}
</style>

如果需要保留style的scoped属性，可以用深度选择器改写样式：

<style scoped>
::v-deep .fade-enter-active, ::v-deep .fade-leave-active{
    transition: all 1s;
}
::v-deep .fade-enter, ::v-deep .fade-leave-to{
    opacity: 0;
}
::v-deep .fade-leave, ::v-deep .fade-enter-to{
    opacity: 1;
}
</style>