SPA的两种实现方式（hash 及 history API）

最新推荐文章于 2024-01-09 09:34:09 发布

晔晔炅萤

最新推荐文章于 2024-01-09 09:34:09 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/qq_18369669/article/details/106672046

版权

什么是SPA

SPA是single page application的缩写，直译为单页面应用。简单来说就是一个web应用程序只有1个页面（1个html）。
在传统的web程序（多页面应用）中，用户每次进入新的页面都要向服务器发起请求，以获取整个页面的所有代码，几乎每一个响应动作都会刷新整个页面，不但浪费带宽，也影响了用户体验。
而SPA只需要请求一次页面代码，切换功能模块时，通过javascript控制渲染不同的内容，避免了请求新的页面（仅仅需要向服务端请求必要的数据），切换“页面”的时候速度很快。

SPA 应该具有的特征

SPA核心是前端路由，路由表示URL与资源的对应关系，前端路由简单说就是通过前端js代码处理不同URL与不同组件模块的对应关系。这些不同的URL在后端获取的都是整个页面资源，而在浏览器端，js通过判断不同的URL代表的具体功能模块，从而渲染不同的组件模块。

1个SPA应用具备的特征有：

切换组件不刷新页面
浏览器的前进后退按钮有效
URL与组件的一一对应关系

SPA的两种实现方式

接下来我们通过 hash 与history API 两种方式实现一个简单的SPA页面。

html结构

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
  #router-nav {
    
    width: 300px;
    height: 50px;
    border: 1px solid red;
    padding: 0;
    margin: 0 auto;
  }
  ul {
    
    margin: 0;
    padding: 0;
  }
  ul li {
    
    width: 80px;
    height: 30px;
    line-height