前端路由原理

一. 什么是前端路由

前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新页面。

二. 有几种模式

• Hash 模式
• History 模式

三. Hash 模式

3.1 相关API

• location.href：返回完整的 URL
• location.hash：返回 URL 的锚部分
• location.pathname：返回 URL 路径名
• hashchange 事件：当 location.hash 发生改变时，将触发这个事件

3.2 改变URL的方式有几种

• 通过浏览器前进后退改变 URL
• 通过标签改变 URL
• 通过window.location改变URL

3.3 特点

1. hash变化会触发网页跳转，既浏览器的前进和后退
2. hash变化不会刷新页面，SPA必需的特点
3. hash永远不会提交到server端（前端自生自灭）
4. hash模式url带#号

四. History 模式

4.1 相关API

• history.go(n)：路由跳转，比如n为 2 是往前移动2个页面，n为 -2 是向后移动2个页面，n为0是刷新页面
• history.back()：路由后退，相当于 history.go(-1)
• history.forward()：路由前进，相当于 history.go(1)
• history.pushState(state, title, url)：添加一条路由历史记录，如果设置跨域网址则报错
• history.replaceState(state, title, url)：替换当前页在路由历史记录的信息
• popstate 事件：当活动的历史记录发生变化，就会触发 popstate 事件，在点击浏览器的前进后退按钮或者调用上面前三个方法的时候也会触发

4.2 路由经过的流程

1. 浏览器发出请求
2. 服务器解析请求，解析请求的URL
3. 服务器根据配置的路由信息，返回相应的信息
4. 浏览器根据服务器返回的信息决定如何解析数据

4.3 特点

1. 用 URL 规范的路由，跳转时不刷新页面
2. history模式不带#号

五. 两种模式的区别

• Hash模式只可以更改 # 后面的内容
• History 模式可以通过 API 设置任意的同源 URL。
• Hash 模式只能更改哈希值，也就是字符串。
• History 模式可以通过 API 添加任意类型的数据到历史记录中
• Hash 模式无需后端配置，并且兼容性好
• History 模式在用户手动输入地址或者刷新页面的时候会发起 URL 请求，后端需要配置 index.html 页面用于匹配不到静态资源的时候。
• hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
• history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。