単ページSPAはルート原理を適用します.history hash
12429 ワード
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title> SPA title>
<style type="text/css">
.api,
.hash {
color: blue;
display: block;
cursor: pointer;
}
style>
head>
<body>
<a class='api a'>a.htmla>
<a class='api b'>b.htmla>
<p>
p>
<a class='hash a'>#a.htmla>
<a class='hash b'>#b.htmla>
<script type="text/javascript">
//
// :document.querySelectorAll('.api') NodeList, NodeList forEach
// NodeList forEach , map/filter
document.querySelectorAll('.api').forEach(item => {
item.addEventListener('click', (e) => {
//
e.preventDefault();
let link = item.textContent;
// pushState 3 , url , ,
//
window.history.pushState({
name: 'api'
},
' ',
link
)
}, false) // false
});
//
// popstate window
window.addEventListener('popstate', (e) => {
console.log({
location: location.href,
state: e.state
})
})
//
document.querySelectorAll('.hash').forEach(item => {
item.addEventListener('click', (e) => {
e.preventDefault();
let link = item.textContent;
window.location.hash = link
}, false)
});
//
// hashchange window
window.addEventListener('hashchange', (e) => {
console.log({
location: location.href,
state: e.state
})
})
// hash ：
// window.location.assign('#a')
// window.location.replace('#b')
script>
body>
html>// Add this:
var _wr = function(type) {
var orig = history[type];
return function() {
var rv = orig.apply(this, arguments);
var e = new Event(type);
e.arguments = arguments;
window.dispatchEvent(e);
return rv;
};
};
history.pushState = _wr('pushState');
history.replaceState = _wr('replaceState');
// Use it like this:
window.addEventListener('pushState', function(e) {
console.warn('THEY DID IT AGAIN!');
});
window.addEventListener('replaceState', function(e) {
console.warn('THEY DID IT AGAIN!');
});hashとhistoryの違い:
sh:
(1)醜い
(2)shはアンカーポイント機能を占用します.
(3)互換性が良い
history:
(1)ルートとバックエンドは同じです.
(2)IE 10級以上
(3)バックエンドサポートが必要です.
(4)popstateは前進または後退時のみトリガします.
onpopstate