js 实现spa
实现 SPA（单页应用）的核心方法
使用 History API 管理路由
通过 history.pushState 和 popstate 事件实现无刷新路由切换。监听 URL 变化，动态加载内容。
// 路由切换逻辑
window.addEventListener('popstate', () => {
loadContent(window.location.pathname);
});
function navigateTo(path) {
history.pushState({}, '', path);
loadContent(path);
}
// 示例路由配置
const routes = {
'/': '<h1>Home Page</h1>',
'/about': '<h1>About Us</h1>'
};
function loadContent(path) {
document.getElementById('app').innerHTML = routes[path] || '<h1>404 Not Found</h1>';
}动态内容加载
使用 Fetch API 或 XMLHttpRequest 异步加载页面片段，替换主容器内容。
async function loadContent(path) {
const response = await fetch(`/templates${path}.html`);
const html = await response.text();
document.getElementById('app').innerHTML = html;
}前端框架替代方案
现代前端框架（React/Vue/Angular）内置路由解决方案，提供更完整的 SPA 支持。
// Vue Router 示例
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
});状态管理
使用全局状态对象或专门的状态管理库（如 Redux/Vuex）维护应用数据。
const store = {
state: { user: null },
setUser(user) {
this.state.user = user;
}
};性能优化策略
- 实现代码分割（Code Splitting）
- 使用懒加载（Lazy Loading）
- 添加加载状态指示器
- 预加载关键资源
// 动态导入实现代码分割
const About = () => import('./About.vue');注意事项
- 处理 404 路由情况
- 实现服务端渲染（SSR）兼容
- 考虑 SEO 优化方案
- 管理滚动位置恢复
这种实现方式避免了整页刷新，通过 JavaScript 动态更新 DOM，提供更流畅的用户体验。现代前端项目通常使用专门的路由库（如 React Router/Vue Router）简化开发流程。
