路由
路由：通过不同的url地址展示不同的内容或者页面
目前路由分类两类：
- 后端路由
- 前端路由
后端路由
使用模板引擎，通过服务端渲染，直接返回相应的页面。
大致过程：
- 浏览器发出请求
- 服务器监听到80端口（或443）有请求过来，并解析url路径
- 根据服务器的路由配置，返回相应资源信息（可以是 html 字串，也可以是 json 数据，图片等）
- 浏览器根据数据包的
Content-Type来决定如何解析数据
前端路由
- 使用iframe进行嵌套，不改变主体url的情况下，加载不同的前端页面
- AngularJS的MVVM框架，让前后端彻底分离，使前端可以独立开发大型应用程序。
- 随后react、vue出现带动了前端热潮，导致前端路由也变得更加独立。
前端路由实现方式
hash：可能是大多数人了解的模式，主要是基于锚点的原理实现。简单易用
history（browser）：即使用html5标准中的history api通过监听popstate事件来对dom进行操作，每次路由变化都会引起重定向
memory：这种实现是在内存中维护一个堆栈用于管理访问历史的方式，比较复杂。在早起移动端使用比较多。实现麻烦，问题也较多。现在很少有使用。RN在使用这种路由模式
static：主要用于ssr。需要后端去管理路由
前端路由解决的问题
根据路由变化显示不同的页面，完成页面切换
通过query传参
前端路由各种实现方案的对比
hash路由
- 优点
- 实现简单，兼容性好（兼容到ie8）
- 绝大多数前端框架均提供了给予hash的路由实现
- 不需要服务器端进行任何设置和开发
- 除了资源加载和ajax请求以外，不会发起其他请求
- 缺点
- 对于部分需要重定向的操作，后端无法获取hash部分内容，导致后台无法取得url中的数据，典型的例子就是微信公众号的oauth验证
- 服务器端无法准确跟踪前端路由信息
- 对于需要锚点功能的需求会与目前路由机制冲突
History（browser）路由
- 优点
- 对于重定向过程中不会丢失url中的参数。后端可以拿到这部分数据
- 绝大多数前段框架均提供了browser的路由实现
- 后端可以准确跟踪路由信息
- 可以使用history.state来获取当前url对应的状态信息
- 缺点
- 兼容性不如hash路由(只兼容到IE10)
- 要后端支持，每次返回html文档
memory路由
- 优点
- 不存在兼容性问题，路由保存在内存中
- 不需要服务器端提供支持
- 缺点
- 前很少有前端路由模块提供对memory路由的实现(react-router提供了memory实现)
- 自己实现难度较大，且工作量也很大
- 对于前进后退操作的路由管理非常麻烦，尤其是android设备的backbutton
选择合适的前端路由方案
hash模式适用场景
- 兼容IE8
- 没有重定向传参需求(第三方认证oauth)
- 没有锚点跳跃需求
- 后端不需要跟踪前端路由信息
- hybrid app需要将前端资源打包在应用内，因为html的域在file://下，所以不能发生重定向
history模式适用场景
- 页面内锚点需求
- 需要重定向传参
- 同构直出
- 后端跟踪路由信息
- 附加路由信息(history.state)获取路由状态
memory模式适用场景
- ie8以下兼容
- React Native
————————————————
智一面|前端面试必备练习题