路由有两种模式
1. 传统模式
传统模式呈现的界面，每次跳转页面都会刷新，重新加载静态资源，呈现的内容通过后端返回的html渲染。 缺点： 用户体验差， 优点 SEO 好
2. 前端路由 （单页面应用）
不同于传统路由。前端路由是 URL 与 UI 之间的映射关系，URL 改变驱动UI变化，也就是单向映射，不需要刷新页面 。 随着页面复杂化和需求逐日增多，前端开始走向 模块化和组件化， 使代码变得难维护，不可控，迭代难， 这时就有了 react，vue，ng 等， 共同的特点就是通过 js 去渲染页面，在页面上只有一个根入口，本质就是通过html5 API 对 url 进行改变和监听，来让dom 元素显示对应的视图
**单页面应用有什么特点**
跳转不好刷新页面，局部更新，用户体验好。
对服务器压力小 服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍
前后端分离 前端只做页面展示， 后端只做数据存储和计算
**缺点**
首次加载慢 首次加载会加载所有资源， 可以使用路由懒加载
SEO 差 可以使用服务端渲染
页面复杂度增加
单页面应用有两种模式 hash history ，怎么能改变url 而不刷新页面， H5提供了两个API onhashchange 和 onpopstate
1、hash 模式
当URL的片段标识符更改时，将触发hashchange事件 (跟在＃符号后面的URL部分，包括＃符号)
路由里面#不叫锚点，称为hash
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Document</title> 8 </head> 9 <body> 10 <a href="#/page1">page1</a> 11 <a href="#/page2">page2</a> 12 <div id="root"></div> 13 <script> 14 let app = null; 15 // hashchange 首次进入不会自执行，需要手动触发 16 window.onload = () => { 17 app = document.querySelector('#root'); 18 handleHashChange(); 19 }; 20 window.addEventListener('hashchange', handleHashChange); 21 function handleHashChange() { 22 console.log(location.hash); 23 switch (location.hash) { 24 case '#/page1': 25 app.innerHTML = '你好'; 26 break; 27 case '#/page2': 28 app.innerHTML = '他好'; 29 break; 30 default: 31 app.innerHTML = '哈喽，'; 32 break; 33 } 34 } 35 </script> 36 </body> 37 </html>
2、history 模式
history模式其实跟hash模式path差不多 没有#而已，监听的方法不同
pushState 向当前浏览器会话的历史堆栈中添加一个历史记录
replaceState 向当前浏览器会话的历史堆栈中修改一个历史记录
popstate 可以监听浏览器历史站的前进后退行为， history.back() history.forward() history.go()
MDN上标注 history.pushState()或者 history.replaceState()不会触发popstate事件。popstate事件只会在浏览器某些行为下触发, 比 如点击后退、前进按钮(或者在JavaScript中调用 history.back()、history.forward()、history.go()方法)，此外，a 标签的锚点也会触发该事件.
注意： history模式 需要后端配合，页面跳转子路由后页面正常，但是刷新页面访问不到了，请求当前url 的路径， 服务器没有响应的响应或者资源 就会出现404，我们只需要在服务器配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。