router hash修改、添加和删除（后退），认识vue router原理
<!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>
hash test
<button id="btn1">修改 hash</button>
[removed]
// hash 变化，包括：
// a. JS 修改 url
// b. 手动修改 url 的 hash
// c. 浏览器前进、后退
[removed] = (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'
})
[removed]
</body>
</html><!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>
history API test
<button id="btn1">修改 url</button>
[removed]
// 页面初次加载，获取 path
document.addEventListener('DOMContentLoaded', () => {
console.log('load', location.pathname, location)
})
// 打开一个新的路由
// 【注意】用 pushState 方式，浏览器不会刷新页面
document.getElementById('btn1').addEventListener('click', () => {
const state = { name: 'page1' }
console.log('切换路由到', 'page1')
history.pushState(state, '', 'page1') // 重要！！
})
// 监听浏览器前进、后退
[removed] = (event) => { // 重要！！
console.log('onpopstate', event.state, location.pathname)
}
// 需要 server 端配合，可参考
// https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子
[removed]
</body>
</html>
发表评论 取消回复