前端路由
Posted by Mars . Modified at
前端路由相关
一、页面路由的历史
1. 早期：路由由服务端控制
流程： 客户端发起http请求 -> 服务端根据请求url匹配不同的资源（不同html） -> 返回请求数据 -> 客户端渲染显示
好处：
- 直接生成html，seo友好；
- 首屏渲染快；
首屏时间（白屏时间）： 从输入url按下回车到页面任意元素加载出来的时间。
缺点：
- 服务器压力大。每次请求都需要处理+响应；、
- 前后端深度耦合，开发协同流程混乱；
2. 现代：SPA单页面应用+前端路由
单页： 单个html文件。
一个html文件，通过前端路由+ajax等技术，实现无刷新路由(更新页面)。
好处：
- 无需刷新；
- 加载过的资源无需重复加载，因为都在一个页面内；
- 只需向服务器请求必要资源，服务器压力小；
- 前后端分离开发；
缺点：
- SEO不友好，搜索引擎爬虫无法获取页面信息；
- 没有提前生成html，需要现场发请求，初次加载首屏渲染时间长；
- 前端逻辑复杂度增加；
二、前端路由的实现原理
1. location.hash
1.1 hash是什么
hash就是页面url中#后面的部分。
1.2 hash路由的特点
- 如果发生http请求，hash部分不会发送给服务器；
- hash部分改变，不会导致页面刷新；
- hash的改变，会导致浏览器访问历史中添加一条记录，可以通过浏览器的返回、前进按钮来访问前一、后一页面；
- hash改变，会触发window上的hashChange事件。
1.3 更改页面hash方式
- location.hash
- a标签的
href = '#xxx';
1.4 监听hash变化的方式
通过window对象的hashChange事件监听。每次hash变化都会触发hashChange事件。
2. history
2.1 history对象的方法和事件
- history.forward(); 前进一步；
- history.back()；后退一步；
- history.go(num)； 正数前进num步，负数后退num步；
- history.pushState(state, title, path)；在浏览记录最后添加一个历史记录；
- history.replaceState(state, title, path)；替换当前历史记录；
pushState/replaceState 的参数：
- state, 是一个对象，是一个与指定网址相关的对象，当 popstate 事件触发的时候，该对象会传入回调函数;
- title, 新页面的标题，浏览器支持不一，一般传入null;
- url, 页面的新地址。
pushState和replaceState的特点：
- 不会触发popState事件，也不会刷新页面；
- 会将当前的页面href替换为最新加入的url（域名+path）；
- 需要手动触发popState事件，才能更新页面；
2.2 history监听的事件
history监听popState事件，以在页面url变化的时候监听变化，做出响应。
触发popState事件的五个操作：
- 点击浏览器后退按钮；
- 点击浏览器前进按钮；
- JS执行history.forward();
- JS执行history.back();
- JS执行history.go()；
3. hash路由和history路由之间的区别
- hash 有#符号，不美观。而history没有；
- hash 的url中#部分内容不会给服务端， history的所有url内容都会给服务端；
- hash 通过 hashchange 监听变化，history 通过 popstate 监听变化（监听事件不同）。
