1.监听地址栏中hash变化驱动界面变化

2.用pushsate记录浏览器的历史，驱动界面发送变化

3.直接在界面用普通事件驱动界面变化

它们都是遵循同一种原则：div 的显示与隐藏

hash/history

使用前端路由

前端路由是SPA最常见的实现方式之一。通过使用前端路由库（如Vue Router、React Router等），将不同的URL路径映射到对应的组件，并在页面上进行动态的组件切换，实现不同页面内容的加载和展示。
前端路由通过监听URL的变化，根据不同的路径匹配对应的组件，并更新DOM内容，而不需要进行整个页面的刷新。

使用AJAX和api请求

SPA通过使用AJAX（Asynchronous JavaScript and XML）技术，可以从后端API请求数据，并将返回的数据通过JavaScript进行渲染，更新页面内容。
SPA可以通过AJAX异步请求获取数据，而不需要重新加载整个页面，从而实现页面的动态更新。

使用动态模板和数据绑定

使用前端框架

SPA可以使用模板引擎（如Vue的模板语法、Angular的模板语法等）将数据和模板进行绑定，实现页面内容的动态渲染。
在SPA中，数据和模板之间建立了响应式的关联，当数据发生变化时，模板会自动更新，反之亦然。

使用前端框架：

前端框架（如Vue、React、Angular等）提供了丰富的工具和功能，可以便捷地实现SPA的开发。
这些前端框架通常包含了路由管理、状态管理、组件化等功能，使得SPA的开发更加高效和便捷。