hash模式
<!--
* @Author: dezhao.zhao@hand-china.com
* @Date: 2021-10-26 17:52:25
* @Description:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hash模式</title>
</head>
<body>
<a href="#/home">home</a>
<a href="#/about">about</a>
<div id="content">default</div>
<script>
window.addEventListener('hashchange', () => {
const content = document.getElementById('content')
// 路径匹配显示
window.location.hash === '#/home'
? (content.innerHTML = 'home')
: (content.innerHTML = 'about')
})
</script>
</body>
</html>
history模式
<!--
* @Author: dezhao.zhao@hand-china.com
* @Date: 2021-10-26 18:01:35
* @Description:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>history</title>
</head>
<body>
<a href="/home">home</a>
<a href="/about">about</a>
<div id="content">default</div>
<script>
const content = document.getElementById('content')
const aEls = document.getElementsByTagName('a')
;[...aEls].forEach((item) => {
item.addEventListener('click', (e) => {
// 阻止默认跳转时间
e.preventDefault()
const href = item.getAttribute('href')
// 修改url
history.pushState({}, '', href)
// 也可以使用replaceState,但其不可以进行回退
// 修改显示内容
content.innerHTML = href
})
})
</script>
</body>
</html>
- 采用链接的默认跳转,会使浏览器按照新的url,再次向服务器请求资源,而服务器下,并没有该资源,导致404错误,通过history对象操作url不会使浏览器再次向服务器请求资源
- 并且history需要在服务器环境下才可以使用,不然会报错,可以通过vscode中liveserver插件搭建一个本地服务
