单页面应用路由
2019-01-21 本文已影响48人
冷小谦
最初的网页是一个个独立的html页面，通过a标签从页面跳转到另一个页面。但是同一个页面会有很多相同的部分。相同的部分无论是静态的还是动态语言程序生成都会浪费一定带宽。
后来通过ajax，用户交互不会再刷新整个页面，单页面应用也就初具雏形。
由于页面中大部分元素是ajax请求后渲染出来的，但由于ajax请求不会改变地址栏，无法保持页面的状态。用户不能把页面的某个状态以url的方式分享给其他人。要重新打开页面重新查找或者请求。
所以需要路由，把页面的状态保存在url中。
前端路由有两种实现方式，一种是H5提出的historyapi，另一种是hash路由。
以往后台路由直接改页面的url使页面刷新。但是前端路由通过#号不能刷新页面，只能通过window的监听事件hashchange来监听hash的变化。我们知道window.location可以操作地址栏修改url，但是修改了Location就会向服务器发送请求并发生页面跳转。但是hash属性修改后不会发生页面跳转
history.push新路由
H5标准中，为History添加了两个新方法pushState和replaceState。
pushState可以让url改变但不会导致浏览器跳转。即改变地址栏并创建一条新的浏览历史记录但不发送网络请求
