路由过渡与动画
将 RouterView 与 Transition 配合使用，根据路由设置 transition-name，以及在路由之间实现滑动/淡入淡出
路由过渡与动画 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。
在路由之间添加动画
URL 发生变化时，匹配的组件会立即切换。将视图包裹在 Vue 的过渡中，即可在页面之间淡入淡出或滑动，让体验更加流畅。
带 v-slot 的 RouterView
要添加动画，您需要访问解析后的组件。RouterView 的作用域插槽形式会公开 Component 和 route。
<RouterView v-slot="{ Component }">
<component :is="Component" />
</RouterView>使用过渡包裹
将动态 component 放在 Transition 周围。路由组件挂载和卸载时，Vue 会应用进入和离开类。
<RouterView v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>为什么使用 mode out-in
没有 mode 时，旧页面和新页面会同时播放动画并相互重叠。mode="out-in" 会等待旧页面离开后，再让新页面进入。
定义 CSS
name 会成为 CSS 类的前缀。请为淡入淡出定义进入和离开过渡。
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>通过元数据设置每个路由的过渡
在路由 meta 中存储过渡名称，这样不同路由就能使用不同动画——一个部分使用滑动，另一个部分使用淡入淡出。
{ path: '/about', component: About, meta: { transition: 'slide' } }计算过渡名称
从插槽中读取 route.meta.transition，并将其绑定到 Transition 的名称；如果没有值，则使用默认名称。
<RouterView v-slot="{ Component, route }">
<Transition :name="route.meta.transition || 'fade'" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>方向性滑动
您可以根据导航方向动态选择过渡——例如，前进时向左滑动，返回时向右滑动——方法是在守卫中比较路由深度。
滑动进入和离开
滑动效果结合了不透明度和变换。让进入的页面从右侧滑入，让离开的页面向左侧滑出。
<style>
.slide-enter-active,
.slide-leave-active {
transition: all 0.3s ease;
}
.slide-enter-from { transform: translateX(30px); opacity: 0; }
.slide-leave-to { transform: translateX(-30px); opacity: 0; }
</style>为参数变化设置键
如果两个路由共享同一个组件（例如 /user/1 和 /user/2），Vue 会复用该组件并跳过过渡。请在路由路径上添加 :key，以强制重新渲染并播放动画。
<component :is="Component" :key="route.path" />遵循减少动画偏好
为了保证无障碍体验，请使用 CSS 媒体查询，在用户偏好减少动画时禁用动画。
<style>
@media (prefers-reduced-motion: reduce) {
.fade-enter-active, .fade-leave-active { transition: none; }
}
</style>快速检查
请测试您对路由过渡的了解。
回顾
您已经学会为路由添加动画：
- 使用带 v-slot 的 RouterView 获取 Component 和 route。
- 使用 Transition 包裹 component :is，并使用 mode="out-in"。
- 根据过渡名称定义进入和离开的 CSS。
- 读取 route.meta.transition 以设置每个路由的动画；为共享组件添加 :key。
常见问题解答
「路由过渡与动画」课时是免费的吗？
是的 — 「路由过渡与动画」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。
「路由过渡与动画」这节课中我会学到什么？
将 RouterView 与 Transition 配合使用，根据路由设置 transition-name，以及在路由之间实现滑动/淡入淡出 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「路由过渡与动画」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。