路由有两种模式

　　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。
 

更多文章请关注《万象专栏》