了解前端路由

路由有两种模式

　　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。