Vue中如何为<router-view>内嵌套子路由实现单独过渡动画

我来帮你搞定这个困扰！你现在的问题是全局包裹<router-view>会让整个页面（包括header这类不需要动画的部分）都动起来，核心原因是你把需要固定的元素（比如header）放到了页面组件里，而不是抽离到全局布局中，或者没有针对嵌套子路由单独设置过渡。下面给你几个针对性的解决方案：

方案1：拆分全局布局（最推荐） #

如果你的header是所有页面都有的公共组件，那直接把它放到App.vue里，让<router-view>只负责渲染内容区域。这样过渡动画就只会作用在内容上，header保持固定不动。

修改后的App.vue：

<template>
  <div id="app">
    <!-- 全局公共header，不会参与过渡 -->
    <header-component></header-component>
    <!-- 只给内容区域加过渡 -->
    <transition name="fade" mode="out-in">
      <router-view class="view"></router-view>
    </transition>
  </div>
</template>

<style scoped>
/* 过渡动画样式 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.view {
  width: 100%;
}
</style>

然后修改你的index.vue（以及其他页面组件），去掉里面的header-component，只保留内容部分：

<template>
  <div class="page-content">
    <!-- 这里只放页面专属内容 -->
    <h1>首页内容</h1>
    <!-- 如果有嵌套子路由，继续在这里放子router-view -->
    <router-view></router-view>
  </div>
</template>

方案2：给嵌套子路由单独加过渡 #

如果你的header是某个父路由专属的（比如只有index.vue有header，其他顶级路由没有），那就在父组件里给嵌套的子路由<router-view>单独包裹<transition>，这样只有子内容切换时会有动画，父组件的header保持不动。

修改index.vue：

<template>
  <div>
    <!-- 父组件的header，不会参与过渡 -->
    <header-component></header-component>
    <!-- 仅给嵌套子路由内容加过渡 -->
    <transition name="fade" mode="out-in">
      <router-view class="content-view"></router-view>
    </transition>
  </div>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.content-view {
  margin-top: 20px;
}
</style>

这时候App.vue里的全局<router-view>可以不用加过渡（或者如果顶级路由切换需要动画，再根据需求调整）。

方案3：通过路由Meta控制全局过渡 #

如果只有部分页面需要过渡动画，其他页面不需要，可以给路由配置添加meta字段，在App.vue里动态判断是否应用过渡。

首先修改路由配置：

const routes = [
  {
    path: '/',
    component: Index,
    meta: { useTransition: true } // 需要动画的路由
  },
  {
    path: '/about',
    component: About,
    meta: { useTransition: false } // 不需要动画的路由
  },
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { useTransition: true },
    children: [/* 嵌套子路由 */]
  }
]

然后修改App.vue：

<template>
  <div id="app">
    <!-- 根据路由meta判断是否显示过渡 -->
    <transition v-if="$route.meta.useTransition" name="fade" mode="out-in">
      <router-view class="view"></router-view>
    </transition>
    <router-view v-else class="view"></router-view>
  </div>
</template>

<style scoped>
/* 过渡样式和之前一样 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

这样就能精准控制哪些路由应用过渡动画啦～

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