当前位置：首页 > JavaScript

js+实现spa

2026-02-02 17:16:18JavaScript

实现 SPA（单页应用）的核心思路

单页应用（SPA）通过动态重写当前页面与用户交互，避免整页刷新，提升用户体验。以下是实现 SPA 的关键方法：

使用 History API 管理路由

通过 history.pushState 和 popstate 事件实现无刷新路由切换：

js+实现spa

// 路由切换
function navigate(path) {
  history.pushState({}, '', path);
  updateView();
}

// 监听浏览器前进/后退
window.addEventListener('popstate', updateView);

function updateView() {
  const path = window.location.pathname;
  const content = document.getElementById('app');
  content.innerHTML = routes[path] || '<h1>404 Not Found</h1>';
}

基于哈希（Hash）的路由方案

兼容旧浏览器的替代方案，监听 hashchange 事件：

js+实现spa

window.addEventListener('hashchange', () => {
  const hash = window.location.hash.slice(1);
  renderPage(hash);
});

动态内容加载

通过 AJAX 或 Fetch API 异步加载内容：

async function loadView(url) {
  const response = await fetch(url);
  document.getElementById('app').innerHTML = await response.text();
}

前端框架简化实现

现代前端框架已封装 SPA 核心功能：

React：结合 React Router
Vue：使用 Vue Router
Angular：内置路由模块

示例完整实现

// 路由配置
const routes = {
  '/': '<h1>Home Page</h1>',
  '/about': '<h1>About Us</h1>',
  '/contact': '<h1>Contact Page</h1>'
};

// 初始化应用
function initSPA() {
  document.body.innerHTML = `
    <nav>
      <a href="/" class="route-link">Home</a>
      <a href="/about" class="route-link">About</a>
      <a href="/contact" class="route-link">Contact</a>
    </nav>
    <div id="app"></div>
  `;

  // 阻止默认链接行为
  document.querySelectorAll('.route-link').forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      navigate(e.target.getAttribute('href'));
    });
  });

  updateView();
}

// 启动应用
initSPA();