hash模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#a">a</a>
<a href="#b">b</a>
<a href="#c">c</a>
<div id="app">
</div>
</body>
<script>## 标题
window.onhashchange = function (event) {
console.log(event)
console.log(location.hash)
if(location.hash == '#a') {
app.innerHTML = 'a视图'
}
if(location.hash == '#b') {
app.innerHTML = 'b视图'
}
if(location.hash == '#c') {
app.innerHTML = 'c视图'
}
}
</script>
</html>
history模式
