背景：

　　单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用，它将所有的活动均局限于一个Web页面中；这就表示Web应用被加载出来之后，Web中所有的交互和跳转均不会与服务器发生交互，而是使用JS转换HTML中的内容。

 

实现的原理：

　　1. 使用 hashchange 可以检测路由的变化情况

　　2. 使用 location.hash 路由，然后根据路由选择需要渲染的页面内容

 

SPA Demo：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>SPA Demo</title>
 6     <style>
 7         .box {
 8             width: 300px;
 9             height: 300px;
10             background: lightyellow;
11             margin: 0 auto;
12         }
13         .content {
14             width: 100%;
15             height: 100%;
16         }
17     </style>
18 </head>
19 <body>
20     <div class="box">
21         <div class="content"></div>
22         <button>下一页</button>
23     </div>
24     <script>
25         const renderHtml = (text) => {
26             let element = document.querySelector('.content')
27             element.innerHTML = text
28         }
29         const responseForPath = (path) => {
30             let mapper = {
31                 '/0': `<h3>第一个界面</h3>`,
32                 '/1': `<h3>第二个界面</h3>`,
33                 '/2': `<h3>第三个界面</h3>`,
34                 '/3': `<h3>第四个界面</h3>`,
35             }
36             if (path in mapper) {
37                 return mapper[path]
38             } else {
39                 return 'not found'
40             }
41         }
42         // 获取当前的路由，然后根据路由选择需要渲染的内容
43         const render = () => {
44             console.log(location.hash)
45             // 根据路由选择相应的内容
46             let r = responseForPath(location.hash.slice(1))
47             // 渲染内容
48             renderHtml(r)
49         }
50         const bindEvents = () => {
51             // 给当前窗口绑定 hashchange 事件
52             window.addEventListener('hashchange', (event) => {
53                 render()
54             })
55         }
56         // 给按钮绑定事件，实现页面路由的更换
57         const buttonBindEvent = () => {
58             let ele = document.querySelector('button')
59             ele.addEventListener('click', (event) => {
60                 let x = location.hash
61                 // console.log(x)
62                 if (x === '') {
63                     location.hash = '/0'
64                 } else {
65                     console.log(x)
66                     let temp = x.slice(2)
67                     console.log(temp)
68                     temp = (Number(temp) + 1) % 4
69                     location.hash = `/${temp}`
70                 }
71             })
72         }
73         const __main = () => {
74             bindEvents()
75             render()
76             buttonBindEvent()
77         }
78         
79         // DOMContentLoaded 事件表示 HTML 已经加载(渲染)到页面中, 这个时候操作 DOM 元素就没有问题
80         document.addEventListener('DOMContentLoaded', () => {
81             __main()
82         })
83     </script>
84 </body>
85 </html>

 

参考资料：

　　1.  如何快速开发SPA应用：https://www.cnblogs.com/constantince/p/5586851.html