前端路由基本原理
前端路由的两种模式
前端路由主要有两种模式，一种是History模式，另一个是Hash模式。
| 模式 | 描述 |
|---|---|
| History模式 | 1、url是不带#的，例：react/test1；react/test2。2、在服务器运行时去进行刷新等操作时会出现404错误，它需要更多的后端配置 |
| Hash模式 | 1、rul是带#号的，例：react#/test1；react#/test2。2、服务器运行不会出现404。 |
history API
在HTML4中，已经支持window.history对象来控制页面历史记录跳转，常用的方法包括：
| history API | 描述 |
|---|---|
| history.forward() | 在历史记录中前进一步 |
| history.back() | 在历史记录中后退一步 |
| history.go(n) | 在历史记录中跳转n步骤，n=0为刷新本页,n=-1为后退一页。 |
在HTML5中，window.history对象得到了扩展，新增的API包括：
| history API | 描述 |
|---|---|
| history.pushState(data[,title][,url]) | 向历史记录中追加一条记录 |
| history.replaceState(data[,title][,url]) | 替换当前页在历史记录中的信息。 |
| history.state | 是一个属性，可以得到当前页的state信息。 |
| window.onpopstate | 是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()方法传入的data参数。 |
history模式原理的理解
首先我们要改造我们的超链接，给每个超链接增加onclick方法，阻止默认的超链接跳转（return false），改用history.pushState或history.replaceState来更改浏览器中的url，并修改页面内容。由于通过history的api调整，并不会向后端发起请求，所以也就达到了前端路由的目的。
如果用户使用浏览器的前进后退按钮，则会触发window.onpopstate事件，监听页面根据路由地址修改页面内容。
以上就是前端路由基本原理的内容，请关注《React 全家桶》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。