面试题：SPA 单页应用的实现方式有哪些？

SPA（Single Page Application，单页应用）是一种前端架构模式，通过动态加载内容实现页面切换，而不是每次请求都从服务器加载完整的 HTML 页面。以下是实现 SPA 的几种常见方式：

1. 基于前端路由的实现

前端路由是 SPA 的核心，通过监听 URL 变化动态加载内容，而无需刷新页面。

1.1 使用 Vue Router（Vue.js）

Vue Router 是 Vue.js 官方推荐的路由库，支持动态路由、嵌套路由、路由守卫等功能。

实现步骤：

安装 Vue Router：

   npm install vue-router

配置路由：

   // router/index.js
   import { createRouter, createWebHistory } from 'vue-router';
   import Home from '@/views/Home.vue';
   import About from '@/views/About.vue';

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

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

   export default router;

在 Vue 应用中使用路由：

   // main.js
   import { createApp } from 'vue';
   import App from './App.vue';
   import router from './router';

   const app = createApp(App);
   app.use(router);
   app.mount('#app');

1.2 使用 React Router（React）

React Router 是 React 生态中常用的路由库。

实现步骤：

安装 React Router：

   npm install react-router-dom

配置路由：

   // App.js
   import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
   import Home from './views/Home';
   import About from './views/About';

   function App() {
     return (
       <Router>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
         </Routes>
       </Router>
     );
   }

   export default App;

2. 基于 Hash 模式的实现

Hash 模式通过 URL 的 # 部分实现路由切换，兼容性较好，但 URL 不够美观。

实现步骤：

监听 hashchange 事件：

   window.addEventListener('hashchange', () => {
     const path = window.location.hash.slice(1); // 获取 # 后的路径
     renderPage(path); // 根据路径渲染页面
   });

初始化时加载当前路径：

   window.addEventListener('load', () => {
     const path = window.location.hash.slice(1) || '/'; // 默认路径
     renderPage(path);
   });

渲染页面：

   function renderPage(path) {
     const content = document.getElementById('content');
     if (path === '/') {
       content.innerHTML = '<h1>Home</h1>';
     } else if (path === '/about') {
       content.innerHTML = '<h1>About</h1>';
     }
   }

3. 基于 History API 的实现

History API 提供了 pushState 和 popstate 方法，可以实现更美观的 URL（无 #）。

实现步骤：

监听 popstate 事件：

   window.addEventListener('popstate', () => {
     const path = window.location.pathname; // 获取路径
     renderPage(path);
   });

初始化时加载当前路径：

   window.addEventListener('load', () => {
     const path = window.location.pathname || '/'; // 默认路径
     renderPage(path);
   });

渲染页面：

   function renderPage(path) {
     const content = document.getElementById('content');
     if (path === '/') {
       content.innerHTML = '<h1>Home</h1>';
     } else if (path === '/about') {
       content.innerHTML = '<h1>About</h1>';
     }
   }

使用 pushState 切换路由：

   function navigateTo(path) {
     history.pushState({}, '', path); // 更新 URL
     renderPage(path); // 渲染页面
   }

4. 基于框架的实现

现代前端框架（如 Vue、React、Angular）都内置或推荐使用路由库来实现 SPA。

4.1 Vue.js

使用 Vue Router 实现 SPA。
支持动态路由、嵌套路由、路由守卫等功能。

4.2 React

使用 React Router 实现 SPA。
支持动态路由、嵌套路由、路由守卫等功能。

4.3 Angular

使用 Angular Router 实现 SPA。
支持懒加载、路由守卫等功能。

5. 基于模块化加载的实现

通过动态加载模块（如 JavaScript 文件）实现 SPA，减少初始加载时间。

实现步骤：

使用 import() 动态加载模块：

   const loadModule = async (path) => {
     const module = await import(`./views/${path}.js`);
     module.render(); // 调用模块的渲染方法
   };

根据路由加载模块：

   window.addEventListener('hashchange', () => {
     const path = window.location.hash.slice(1); // 获取 # 后的路径
     loadModule(path);
   });

6. 基于服务端渲染（SSR）的实现

SSR 结合 SPA 可以实现更好的 SEO 和首屏加载性能。

实现方式：

Next.js（React）：支持 SSR 和 SPA 混合模式。
Nuxt.js（Vue）：支持 SSR 和 SPA 混合模式。

总结

实现 SPA 的常见方式包括：

基于前端路由：使用 Vue Router、React Router 等路由库。
基于 Hash 模式：通过 hashchange 事件实现路由切换。
基于 History API：通过 pushState 和 popstate 实现路由切换。
基于框架：使用 Vue、React、Angular 等框架的路由功能。
基于模块化加载：通过动态加载模块实现路由切换。
基于服务端渲染（SSR）：结合 SSR 和 SPA 提升性能和 SEO。

根据项目需求和技术栈选择合适的方式，可以构建高效、灵活的单页应用。

THE END

Vue 进阶面试题