如何让页面跳转更丝滑
用户在地址栏输入URL或者点击链接后，浏览器会发出请求，然后Web应用负责把URL映射到指定页面，即路由。
路由映射逻辑可以由前端实现(即前端路由)，也可以是后端实现(即后端路由)。
一. 静态网页应用
前期的Web应用一般是静态页面，采用后端路由。后端接受到请求后，解析并匹配URL，返回HTML给浏览器。
静态网页应用不好的地方是: 用户每次更新操作都需要刷新页面，用户交互体验不佳。
二. Ajax应用
后来，出现了革命性的技术-Ajax，它允许网页在不刷新页面的情况跟后端交互数据，实现局部刷新页面。
当用户有更新操作时，通过XMLHttpRequest跟后端异步交互数据，然后用JavaScript进行DOM操作，更新页面。
简单的Ajax应用解决了页面更新的问题，但页面跳转的问题依然存在。
三. SPA应用
SPA是在Ajax的基础上诞生的，它实现了在不刷新页面的情况进行页面更新和页面跳转，由前端路由来切换页面。
前端路由要解决的两个核心问题:
-
URL变化时，不会引起浏览器刷新页面。
默认使用window.location.href=“http://www.xxx.com/xxx” 这种跳转方式 会引起页面刷新。 -
页面切换时能记录到浏览器会话历史，保证前进/后退按钮正常使用。
实现方案
前端路由的设计思路是: 使用自定义的页面跳转方式; 检测URL变化，解析匹配URL并路由到指定页面。
常见有以下两种实现方案:
1. URL hash
基于锚点原理实现。
- 页面跳转
通过改变URL #hash值来跳转页面(URL #hash的变化不会引起页面刷新)。
- 监听URL变化
监听hashchange和load事件。
当URL #hash值变化时会触发hashchange事件;
当页面刷新时会触发load事件。
addEventListener('hashchange',event => {
// 路由匹配
})
addEventListener('load',event => {
// 路由匹配
})
- 路由匹配
解析匹配URL，并路由到指定页面。
- 浏览器会话历史
URL #hash值的变化会被加入到浏览器会话历史。
2. history api
基于浏览器会话历史 api实现。
- 页面跳转
使用pushstate()和replacestate()来跳转页面。(只改变URL，不会引起页面刷新)
- 监听URL变化
监听popstate事件。
在同一文档的不同历史记录条目之间导航时，会触发popstate事件(pushstate()和replacestate()不会触发popstate事件)。
addEventListener('popstate',event => {
// 路由匹配
})
- 路由匹配
解析匹配URL，并路由到指定页面。
- 浏览器会话历史
history api会正常记录浏览器会话历史。
3. 对比
- URL hash: 不需要后端做多余的重定向处理，但后端也无法正常获取到URL的#hash值。
- history api: 后端可以获取到完整的URL参数，但需要后端支持重定向到入口html。
总结
路由的本质是将URL映射到指定页面，它是Web应用的基本功能。
前期的静态网页应用使用后端路由，由后端做路由映射并返回HTML。不足之处是: 用户每次更新操作都需要刷新页面。
后来，出现了革命性的技术-Ajax，允许网页在不刷新页面的情况跟后台交互数据，实现页面局部刷新。
为了进一步提升页面跳转的交互体验，出现了SPA，它实现了在不刷新页面的情况进行页面更新和页面跳转。主要有基于URL #hash和基于history api两种实现方案。
补充
锚点
锚点链接可以跳转到页面中指定位置。当页面内容较多时，可以提升用户体验。
a. 创建锚点
<h1 name="anchor_a">锚点a<h1>
b. 访问锚点链接(url的#hash值就是锚点)，页面会自动定位到锚点位置。
http://www.xxx.com#anchor_a