Vue Router 进阶：路由过渡动画深度解析

许煦津

于 2025-06-02 09:03:20 发布

阅读量291

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00055/article/details/148375328

Vue Router 进阶：路由过渡动画深度解析

vue-router 🚦 The official router for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-router

前言

在现代单页应用(SPA)开发中，流畅的页面过渡效果能显著提升用户体验。Vue Router 作为 Vue.js 官方路由解决方案，与 Vue 的过渡系统完美集成，提供了强大的路由过渡能力。本文将深入探讨如何在 Vue Router 中实现各种过渡效果。

基础过渡实现

Vue Router 的核心组件 <router-view> 本质上是一个动态组件，这意味着我们可以直接使用 Vue 的 <transition> 组件来包裹它：

<transition name="fade">
  <router-view></router-view>
</transition>

然后定义对应的 CSS 过渡样式：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

这种基础实现方式简单直接，适用于大多数需要统一过渡效果的场景。

路由专属过渡

当不同路由需要展现不同的过渡效果时，我们可以在路由组件内部定义专属过渡：

const UserProfile = {
  template: `
    <transition name="profile-slide">
      <div class="user-profile">...</div>
    </transition>
  `
}

const Dashboard = {
  template: `
    <transition name="dashboard-fade">
      <div class="dashboard">...</div>
    </transition>
  `
}

这种方式的好处是：

每个路由组件可以完全控制自己的过渡行为
过渡逻辑与组件封装在一起，便于维护
可以实现更复杂的组件级过渡效果

动态过渡策略

更高级的场景是根据路由变化动态决定过渡效果。例如，实现类似移动应用的"前进后退"过渡效果：

<transition :name="transitionName">
  <router-view></router-view>
</transition>

watch: {
  '$route'(to, from) {
    // 根据路由深度决定过渡方向
    const toDepth = to.meta.depth || to.path.split('/').length
    const fromDepth = from.meta.depth || from.path.split('/').length
    this.transitionName = toDepth > fromDepth ? 'slide-left' : 'slide-right'
  }
}

对应的 CSS 定义：

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.5s ease;
  position: absolute;
  width: 100%;
}

.slide-left-enter {
  transform: translateX(100%);
}

.slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter {
  transform: translateX(-100%);
}

.slide-right-leave-to {
  transform: translateX(100%);
}

进阶技巧

1. 过渡模式

默认情况下，进入和离开过渡同时进行。使用 mode 属性可以改变这一行为：

<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>

mode="out-in" 会等待当前元素过渡完成，再开始新元素的过渡。

2. 路由元信息

利用路由的 meta 字段可以更灵活地控制过渡：

{
  path: '/user/:id',
  component: User,
  meta: {
    transition: 'zoom'
  }
}

然后在全局过渡组件中：

watch: {
  '$route'(to, from) {
    this.transitionName = to.meta.transition || 'fade'
  }
}

3. JavaScript 钩子

对于需要复杂动画的场景，可以使用 JavaScript 钩子：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  <router-view></router-view>
</transition>

methods: {
  beforeEnter(el) {
    // 动画开始前的准备工作
  },
  enter(el, done) {
    // 进入动画逻辑
    done() // 动画完成时调用
  },
  leave(el, done) {
    // 离开动画逻辑
    done()
  }
}