前端路由的核心就在于更改url,页面不刷新,如何做到这一点呢?
第一种方法是改变url的hash值。
location.href
>>> http://localhost:8080/#
location.hash = 'foo'
>>> http://localhost:8080/#/foo
改变hash值,页面不刷新,页面会根据前端的路由映射关系找到相应的组件数据并呈现。
第二种方式是使用HTML5的history模式
#1 pushState()与back()
location.href
>>> http://localhost:8080
history.pushState({},'','foo')
>>> http://localhost:8080/foo
history.pushState({},'','about')
>>> http://localhost:8080/about
history.pushState({},'','bar')
>>> http://localhost:8080/bar
history.back()
>>> http://localhost:8080/about
history.back()
>>> http://localhost:8080/foo
把url看做一个栈,pushState()向栈中放入一个url,而back()删除掉栈顶的url,页面总是呈现栈顶的url。
这种方式保留了历史记录,页面可以返回。
#2 replaceState()
location.href
>>> http://localhost:8080
history.replaceState({},'','home')
>>> http://localhost:8080/home
history.replaceState({},'','about')
>>> http://localhost:8080/about
直接改变了url,这种方式没有保存历史记录,页面不可返回。
#3 go()与forward()
//这两个方法一般与pushState()结合使用
//pushState()会使浏览器保留一个url的历史记录,而go()方法与forward()方法都可以改变这个历史记录的状态
history.go(-1) 等价于 history.back()
history.go(1) 等价于 history.forward()
history.go(-2)
history.go(2)
...