HTML5 history API
HTML5 introduces the history.pushState() and history.replaceState() methods. They can add and modify history entries respectively.
pushState()
history.replaceState(stateObj, title, [url])
-
stateObj: a JavaScript object, which can be any object that can be serialized. It is associated with a new history entry created. Whenever the user navigates to a new state, the pop state event will be triggered (described below).
-
Title: short title (this parameter is ignored by most browsers).
-
URL: the URL of the history entry.
The browser maintains a History stack for each page. When the pushState() pointer is at the top of the stack, the current History will be retained, a new History entry will be added and pushed into the top of the stack. At the same time, modify the pointer to point to the new record, and the History stack size will increase.
When the pushState() pointer is not at the top of the stack but in the middle of the stack, the record above the pointer will be removed, a new record will be added and pushed into the top of the stack.
When the back operation is performed, the pointer moves to the previous record, but the stack does not change.
Test demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn1">pushState</button>
<button id="btn2">getLen</button>
<span></span>
</body>
<script src="./js/jquery.min.js"></script>
<script>
$(document).ready(function() {
let i = 1;
$('span').html('The total number of entries in the current history stack:' + history.length);
$('#btn1').on('click', () => {
history.pushState({}, '', 'test' + i + '.html');
i++;
});
$('#btn2').on('click', () => {
$('span').html('The total number of entries in the current history stack:' + history.length);
});
});
</script>
</html>
replaceState()
history.replaceState(stateObj, title, [url])
replaceState() modifies the current record to the specified URL, but does not change the pointer.
Test demo:
<body>
<button id="btn1">pushState</button>
<button id="btn2">replaceState</button>
<button id="btn3">getLen</button>
<span></span>
</body>
<script src="./js/jquery.min.js"></script>
<script>
$(document).ready(() => {
let i = 1;
$('span').html('The total number of entries in the current history stack:' + history.length);
$('#btn1').on('click', () => {
history.pushState({}, '', 'test' + i + '.html');
i++;
});
$('#btn2').on('click', () => {
history.replaceState({}, '', 'test' + i + '.html');
i++;
});
$('#btn3').on('click', () => {
$('span').html('The total number of entries in the current history stack:' + history.length);
});
});
</script>
Population event
Population is also a new interface in H5 History API, which is mainly used to control history entries.
When the history entry changes, the pop state event is triggered. When users click back, move forward, or call histroy.back(), history.go(), history.forward() in js, the popstate event will trigger. But history.pushState() and history.replaceState() will not trigger this event.
Test demo:
<body>
<button id="btn1">pushState</button>
<button id="btn2">replaceState</button>
<button id="btn3">forward</button>
<button id="btn4">back</button>
<span></span>
</body>
<script src="./js/jquery.min.js"></script>
<script>
$(document).ready(() => {
let i = 1;
$('#btn1').on('click', () => {
history.pushState({page: i}, '', 'test' + i + '.html');
i++;
});
$('#btn2').on('click', () => {
history.replaceState({page: i}, '', 'test' + i + '.html');
i++;
});
$('#btn3').on('click', () => {
history.forward();
});
$('#btn4').on('click', () => {
history.back();
});
window.addEventListener('popstate', (event) => {
console.log("state: " + JSON.stringify(event.state));
});
});
</script>
Vue router history mode
The main feature of front-end routing is to update the page view without requesting a page by changing the URL. Two new methods in the HTML5 history API provide convenience for this.
The default hash mode of Vue router uses the hash of the URL to simulate a complete URL. Hash is the symbol # and the following characters, such as URL http://localhost:8080/#/Home , hash is # / home. The hash will not be included in the HTTP request, so modifying the hash content will not re request the page.
In the history mode, the URL jump is completed by using the history.pushState API without reloading the page. From the above demo, we can see that using history.pushState() and history.replaceState() no matter how the URL changes, the page only modifies the view, but does not send new requests. Once we refresh the page, we will find that the 404 resource file does not exist and the specified html file does not exist.