主要有两种方式
第一种
- 改 window.location.hash 优点是：没有任何的BUG
小栗子 ：
<button id="x">x</button>
<button id="y">y</button>
<div id="动态区域"></div>
<script>
x.onclick = function () {
// 动态区域.innerText = 'xxxxxxxxxxx'
window.location.hash = 'x'
}
y.onclick = function () {
window.location.hash = 'y'
}
// x.onclick = function () {
// // alert('1')
// window.location.hash = "wangyx"
// }
//点击当前按钮 动态展示当前hash及内容
window.onhashchange = function () {
var hash = window.location.hash
展示内容(hash)
}
//当hash为空的时候 默认展示 x的内容 当前连接 hash被复制也会展示当前内容
var hash = window.location.hash
if (hash === '') {
window.location.hash = 'x'
} else {
展示内容(hash)
}
function 展示内容(hash) {
if (hash === '#x') {
动态区域.innerText = 'xxxxxxxxxxx'
} else if (hash === '#y') {
动态区域.innerText = 'yyyyyyyyyyyy'
}
}
第二种
用 window.history.pushState()
优点： 更优雅 。缺点：刷新就会 404 解决方式 ：让后端支持模糊匹配的路由
小栗子 ：
<button id="x">x</button>
<button id="y">y</button>
<div id="动态区域"></div>
<script>
x.onclick = function () {
window.history.pushState('', 'x页面', '/URL-demo-2.html/x')
}
y.onclick = function () {
window.history.pushState('', 'y页面', '/URL-demo-2.html/y')
}
</script>
