最近研究vue-router单页转跳而不向服务器请求的原理,
主要是HTML5 history以及hash的应用,支持history时使用history模式
下面详细学习了一下常用的history相关的API
常用API:
1.history.length:
返回当前页面所产生的历史记录个数,即在同一个浏览器tab下产生的历史记录;
2.history.pushState(state,title,URL):
向浏览器新增一条历史记录,但是不会刷新当前页面(不会重载),其中state为对象,可以用作携带信息用,title:目前来看没啥用一般为空或null,URL:即要更改页面的URL,且必须同源,不能跨域;
3.history.replaceState(state,title,URL):
更改当前浏览器的历史记录,即把当前执行此代码页面的记录给替换掉,参数与第二条相同;
4.history.back()、history.forward()、history.go():
分别为前进一个历史,后退一个,history.go(Number),其中Number可正可负,即向前或向后若干个记录
5.history.state:
返回当前页面状态参数,此参数一般由history.pushState(state,title,URL);以及history.replaceState(state,title,URL);附带的state值,例子如下:
当前页面为http://example.com
-
history.pushState({
a:
1},null,
"test1");
//http
://example.com/test1
-
history.state;
//{
a:
1}
-
-
history.pushState({
b:
2},null,
"test2");
//http
://example.com/test2
-
history.state;
//{
b:
2}
-
-
history.back();
//http
://example.com/test1
-
history.state;
//{
a:
1}
-
-
history.back();
//http
://example.com
-
history.state;
//null
上面例子应该已经很明确的表明state的取值,即当前页面的状态值,没有状态值为null;
6.history事件onpopstate:
-
window.onpopstate =
function(e){
-
console.log(e.state);
-
}
在history.back(),history.forward(),history.go()时触发此事件,但是在history.pushState();history.replaceState();时并不会触发此事件,事件内可以获取到state状态值
由此可以看出vue-router中push()、go()等函数的一些端倪,但是vue-router比这个要复杂,
history是其基础之一,下一篇还有其hash的用法详解。