目录
1.vue-router 的路由模式
- hash
- H5 history（需配置mode:history，需后端配合）
1.1 hash 路由
1.1.1 hash 的特点
- hash 变化会触发网页跳转，即浏览器的前进，后退
- hash 变化不会刷新页面，SPA 必需的特点
- hash 永远不会提交到 server 端（前端自生自灭）
1.1.2代码演示
<!DOCTYPE html>
<html lang="en">
<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>hash test</title>
</head>
<body>
<p>hash test</p>
<button id="btn1">修改 hash</button>
<script>
// hash 变化，包括：
// a. JS 修改 url
// b. 手动修改 url 的 hash
// c. 浏览器前进、后退
window.onhashchange = (event) => {
console.log('old url', event.oldURL)
console.log('new url', event.newURL)
console.log('hash:', location.hash)
}
// 页面初次加载，获取 hash
document.addEventListener('DOMContentLoaded', () => {
console.log('hash:', location.hash)
})
// JS 修改 url
document.getElementById('btn1').addEventListener('click', () => {
location.href = '#/user'
})
</script>
</body>
</html>1.2 H5 history 路由
1.2.1 H5 history 的特点
- 用 url 规范的路由，但跳转时不刷新页面
- history.pushState
- window.onpopstate
1.2.2 代码演示
<!DOCTYPE html>
<html lang="en">
<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>history API test</title>
</head>
<body>
<p>history API test</p>
<button id="btn1">修改 url</button>
<script>
// 页面初次加载，获取 path
document.addEventListener('DOMContentLoaded', () => {
console.log('load', location.pathname)
})
// 打开一个新的路由
// 【注意】用 pushState 方式，浏览器不会刷新页面
document.getElementById('btn1').addEventListener('click', () => {
const state = { name: 'page1' }
console.log('切换路由到', 'page1')
history.pushState(state, '', 'page1') // 重要！！
})
// 监听浏览器前进、后退
window.onpopstate = (event) => { // 重要！！
console.log('onpopstate', event.state, location.pathname)
}
// 需要 server 端配合，可参考
// https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
</script>
</body>
</html>2.总结
- hash - window.onhashchange
- H5 history - history.pushState 和 window.onpopstate
- H5 history 需要后端支持
3.两者如何选择
- to B 的系统推荐使用 hash，简单易用，对 url 规则不敏感
- to C 的系统，可以考虑选择 H5 history（SEO，性能优化），但需要服务端支持
- 能选择简单的，就别用复杂的，要考虑成本和收益