随着 ajax 的使用越来越广泛，前端的页面逻辑开始变得越来越复杂，特别是spa的兴起，前端路由系统随之开始流行。 从用户的角度看，前端路由主要实现了两个功能（使用ajax更新页面状态的情况下）：
- 记录当前页面的状态(保存或分享当前页的url,再次打开该url,网页还是保存(分享)时的状态)
- 可以使用浏览器的前进后退功能(如点击后退按钮,可以使页面会到使用Ajax更新页面之前的状态,url也回到之前的状态)
作为开发者,要实现这两个功能,我们需要做到一下几点:
- 改变url且不让浏览器向服务器发出请求;
- 监测url的变化;
- 截获url地址,并解析出需要的信息来匹配路由规则
我们通常用的hash模式或history模式实现上面的功能
hash模式
这里的hash就是指url尾巴后的#号以及后面的字符.这里的#和css里的#是一个意思.hash也称作锚点,本身是用来做页面定位的,它可以使对应的id的元素显示在可是区域内.
由于hash值变化不会导致浏览器向服务器发出请求,而且hash改变会触发hashchange事件,浏览器的进后退也能对其进行控制,所以人们在html5在history出现前,基本上都是使用hash来实现前端路由的.
使用到的api:
window.location.hash = "qq" //设置url的hash,会在当前url后加上'#qq'
var hash = window.location.hash // '#qq'
window.addEventListener('hashChange',function(){
//监听hash变化,点击浏览器的前进后退会触发
})
history模式
已经有了hash模式了,而且hash能兼容到IE8,history只能兼容到IE10,为什么还要history呢?
首先,hash本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了.其次,hash的传参是基于url的,如果要传递复杂的数据,会有体积的限制,而history模式不仅可以在url里面放参数,还可以将数据存放在一个特定的对象中.
相关API:
window.history.pushState(state,title,url)
// state:需要保存的数据,这个数据在触发popState事件时,可以在event.state里获取
//title:标题,基本没用,一般传null
//url:设定新的历史记录的url,新的url与当前url的origin必须是一样的,否则会抛出错误.url可以是绝对路径,也可以是相对路径.
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
6 //执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/
window.history.replaceState(state,title,url)
与pushState基本相同,但是它修改当前历史记录,而pushState是创建新的历史记录
window.addEventListener('popstate',function(){
//监听浏览器的前进后退事件.pushState与replaceState方法不会触发
})
window.history.back() //后退
window.history.forward() //前进
window.history.go(1) //前进一步,-2为后退两步,window.history.length可以查看当前历史堆栈中页面的数量
history模式改变url的方式会导致浏览器向服务器发送请求,这不是我们想看见的,这点需要在服务器端做处理:如果匹配不到任何静态资源,则应该始终返回同一个html页面
