前端路由

2019/4/1
通过记录url的变化来记录ajax的变化（ajax的标签化），从而实现前端路由。
前端路由存在缺陷：使用浏览器的前进，后退键时会重新发送请求，来获取数据，没有合理地利用缓存。

• 前端路由实现
  1.1
  基于location.hash实现
  location.hash的值就是URL中#后面的内容
  如：

https://www.baidu.com#user

location.hash = user;
1.2 hash的特性

• • URL中hash值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash部分不会被发送。
• • hash值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash的切换。
• • 使用hashchange事件来监听hash的变化。
    1.3 触发hash值改变的方法
    1.3.1 使用a标签
    <a href="#user"></a>
    1.3.2使用loaction.hash进行赋值
    loaction.hash = "#user"

２.1 基于History API
history.pushState()和history.repalceState()
都会操作浏览器的历史记录，而不会引起页面的刷新，不同在于pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录。
２.2参数问题

• • 状态对象（state object） — 一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。
• • 标题（title） — FireFox浏览器目前会忽略该参数，考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。
• • 地址（URL） — 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。
    ps:暂时性理解，后续深入理解后再更新．预计三天内

转载于:https://www.jianshu.com/p/b1340f43e9cb