页面切换动画实现与性能优化的实战经验分享

我为什么对比页面切换的方案？

说实话，页面切换这事儿，看似简单，但实际开发中坑还挺多。尤其是现在前端框架五花八门，选型的时候总让人纠结。最近我在一个项目里，需要频繁在多个页面间切换，既要保证用户体验流畅，又要兼顾代码的可维护性。于是，我特意花了点时间，把几种常见的页面切换方案都试了一遍，今天就来聊聊我的踩坑经历和最终选择。

谁更灵活？谁更省事？

先说结论：React Router 和 Vue Router 这俩框架路由方案，是我目前最常用的；原生 history API 更加底层，适合轻量级场景；而 CSS 动画+手动 DOM 操作则基本可以放弃了。 下面详细聊聊它们各自的优劣。

先看 React Router：

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

function Home() {
  return <h1>这是首页</h1>;
}

function About() {
  return <h1>这是关于页面</h1>;
}

React Router 的优点是生态成熟、文档齐全，配合 React 使用简直是天作之合。但它的缺点也很明显：如果你的项目不是基于 React，那就别想了。而且它有时候对初学者不太友好，比如动态路由配置稍微复杂一点，新手可能会被绕晕。

再来看 Vue Router：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

Vue Router 的优势在于它的API设计非常直观，上手门槛比 React Router 略低。特别是 Vue 3 之后，组合式 API 和路由结合得更好。不过，Vue Router 在大型项目中偶尔会出现一些奇怪的问题，比如路由守卫的逻辑太复杂时，代码会显得有点乱。

性能对比：差距比我想象的大

说到性能，这里必须提一下原生的 history API。很多人可能觉得用框架路由就够了，但实际上，history API 才是最接近浏览器底层的实现方式：

// 切换页面
function navigateTo(path) {
  history.pushState(null, '', path);
  renderPage(path);
}

// 监听浏览器前进后退事件
window.addEventListener('popstate', () => {
  renderPage(location.pathname);
});

// 根据路径渲染对应页面
function renderPage(path) {
  const app = document.getElementById('app');
  if (path === '/') {
    app.innerHTML = '<h1>这是首页</h1>';
  } else if (path === '/about') {
    app.innerHTML = '<h1>这是关于页面</h1>';
  }
}

这种方式的优点是轻量级、无依赖，特别适合一些小型项目或者需要高度自定义的场景。但它的问题也很明显：手动管理页面状态和事件监听，代码量容易失控。如果项目规模稍大，后期维护成本会很高。

至于纯 CSS 动画+手动 DOM 操作，我只能说：千万别用。虽然理论上可以通过隐藏和显示 DOM 元素来模拟页面切换，但这玩意儿实在是太脆弱了。比如下面这段代码：

<div id="home" class="page active">首页内容</div>
<div id="about" class="page">关于内容</div>

<style>
  .page { display: none; }
  .page.active { display: block; }
</style>

<script>
  function switchPage(targetId) {
    document.querySelectorAll('.page').forEach(page => {
      page.classList.remove('active');
    });
    document.getElementById(targetId).classList.add('active');
  }
</script>

看起来很简单吧？但一旦涉及到复杂的交互逻辑（比如表单数据保留、滚动位置恢复等），这种方案就会崩溃。亲测有效，但真的不推荐。

我的选型逻辑

总结一下我的选型偏好：

• 如果是 React 项目，毫无疑问用 React Router，生态好、社区支持强。
• 如果是 Vue 项目，我会优先考虑 Vue Router，尤其是 Vue 3 的组合式 API 非常香。
• 小型项目或需要高度定制化时，history API 是个不错的选择。
• CSS 动画+DOM 操作，除非是极简需求，否则不要折腾。

另外补充一点，如果你的项目需要和后端深度交互，比如从 https://jztheme.com/api 获取动态路由配置，那么 React Router 或 Vue Router 的动态路由功能会非常实用：

// React Router 动态路由示例
<Route path="*" element={<NotFound />} />

// Vue Router 动态路由示例
router.addRoute({ path: '/dynamic', component: DynamicComponent });

结尾：以上是我的对比总结

其实每种方案都有适用场景，关键还是看具体需求。我个人比较喜欢用 React Router 和 Vue Router，因为它们确实能让开发效率提升不少。history API 则是一个不错的备选方案，尤其是一些非框架项目中。

如果你有更好的页面切换方案，欢迎评论区交流！这个话题我觉得还有很多值得探讨的地方。