history和hash两种路由

知识点：
1.为什么使用路由
2、路由实现的三个功能
3、hash路由
4、history模式

1、为什么要使用路由

现在很多网页使用的是ajax异步请求完成页面的局部刷新（URL不变），
从而提升了用户的体验，同时带来的问题就是用户下次使用URL的时候无法呈现之前ajax的异步内容，
路由提供的是浏览器地址的变化
两者结合起来就能提升了用户体验的同时改变了URL地址。同时减少了http请求

2、路由实现的功能

1、在使用ajax局部刷新页面后，记录当前状态页面的URL并保存
2、可以使用浏览器的前进后退功能，（点击前）前进后退也能回到之前ajax更新的状态
3.改变URL且不让浏览器向服务器发出请求
4、检测URL的变化
5、监测当前URL地址后，解析出需要的信息匹配路由规则

介绍完上面的内容之后，就来了解今天的主题，两种路由模式：
hash模式：监听浏览器地址hash值的变化，执行相应的js切换网页
history模式：利用history API 实现URL地址的变化，从而改变网页的内容

3、hash模式

使用window.location .hash 属性及窗口的onhashchange事件，实现监听浏览器地址hash值变化，执行相应的js切换网页

几个要点：
1、#后字符是hash，也叫扩散列值 hash称作锚点，用来做页面跳转的，使对应的元素出现在视口内
2.hash在页面内跳转，不会随请求发送到服务器端，所以改变hash值，不重新加载页面
3.location.hash值的变化会直接反应到浏览器地址栏上
4、监听window的hsahchange事件，hash值改变是，可以通过location。hash来获取和设置hash值

触发情况：
1、浏览器中的hash值变化会触发
2、在html中a链接设置锚点

4、history模式

1、字面意思理解：当前窗口的浏览历史
2、history对象保存当前窗口访问过的所有页面网址。history.length可查询和访问之前的网址
3、浏览器的前进和后退按钮可以对history值操作

history的两个属性：
history.length:当前窗口访问过的网址数量（包括当前网页）
history.state:当前窗口的状态值。默认为undefind

history方法：
三种：
history.back() ：移动到上一个网址
history forward():移动到下一个网址
history.go（）默认参数为0，指定参数调转到网页，以当前网页为基准，负数是往前，正数是往后、
注：访问之前网页的时候，从浏览器缓存中加载不需要请求服务器。

history.pushsate(object,title url)
历史中添加记录，不会触发页面的局部刷新，是地址栏的history发生变化，
object：对象，传递到新页面中的对象，默认null
title：标题，默认空，浏览器不支持。
url：新网址，必须处于同一个域内，否则会报错。不指定为当前页面
history.replacestate()修改当前的history记录