前端路由学习

SPA单页面应用

单页面应用指的是应用只有一个主页面，通过动态的替换DOM内容并同步修改url地址，来模拟多页面应用的效果，切换页面的功能直接由前台脚本完成，而不是由后端渲染完成后前端只负责展示

----路由

路由是URL到函数的映射

路由分为后端路由和前端路由

--后端路由

服务器端路由，对于服务器来说，当接收到客户端发来的http请求，就会根据请求的URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端

优点：安全性好，SEO好

缺点：加大服务器的压力，不利于用户体验，代码冗合

--前端路由

路由的映射函数通常是进行一些DOM的显示和隐藏操作，当访问不同的路径的时候，会显示不同的页面组件

缺点：使用浏览器的前进，后退键时会重新发送请求，来获取数据，没有合理地利用缓存

前端路由的实现

----基于hash  location.hash

location.hash的值就是URL中#后面的内容

hash存在几个特性：1.URL中hash值只是客户端的一种状态，即向服务端发送请求时，hash部分不会被发送；2.hash值的改变，都会在浏览器的访问历史中增加一个记录，因此可以通过浏览器的回退、前进按钮控制hash的切换；3.可以使用hashchange事件来监听hash的变化

--触发hash变化的方式

1.通过a标签，设置href属性，当用户点击标签时，url会发生变化，会触发hashchange事件

2.直接对location.hash进行赋值，改变url，触发hashchange事件

--优缺点

优点：实现简单，兼容性好，绝大多数前端框架均提供了给予hash的路由实现，不需要服务器端进行任何设置和开发，除了资源加载和ajax请求以外，不会发起其他请求

缺点：对于部分需要重定向的操作，后端无法获取hash部分内容，导致后台无法取得url中的数据

----基于history API

H5提供了history API来实现URL的变化，主要的2个API为 history.pushState() 和 history.replaceState() ，这两个API可以在不进行刷新的情况下，操作浏览器的历史纪录；唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史纪录

pushState()和replaceState()都接收三个参数：1.状态对象，一个js对象，与用pushState()方法创建的新历史记录条目关联，无论何时用户导航到新创建的状态，会触发popstate事件，并能在事件中使用该对象

2.标题，一般浏览器会忽略，最好传null

3.地址，即需要新增的历史记录的地址，浏览器不会去直接加载该地址，但后面也可能会去尝试加载该地址，此外需要注意的是，传入的URL与当前的URL应该是同源的

--优缺点

优点：对于重定向过程中不会丢失url中的参数，后端可以拿到这部分数据，绝大多数前端框架军均提供了history模式的路由实现，后端可以准确跟踪路由信息，可以使用 history.state来获取当前url对应的状态信息

缺点：兼容性不如hash路由，需要后端支持，每次返回html文档