路由有两种模式
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。