目录
一、spa
spa作用
Singel Page Application 单页面应用
多页面页面切换在一个html里面实现spa如何实现
1.监听地址栏的变化
2.动态切换div模拟切换页面
二、实现
哈希(锚点)
锚点切换并不会让页面刷新(改变页面)
window.onhashchange
H5新增Apl history
history.onpopstate
三、区别
四、代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.router-view>div {
height: 300px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class="nav">
<!-- a标签的作用就是,改变地址栏的哈希值(锚点)触发window hashchange事件 -->
<a href="#/home" class="router-link">首页</a>
<a href="#/about" class="router-link">关于</a>
<a href="#/user" class="router-link">个人中心</a>
</div>
<div class="router-view">
<div id="home">
首页很好看
</div>
<div id="about">
关于页面很感动
</div>
<div class="user">
个人中心,余额充足
</div>
</div>
<script>
//配置对象
var routes = [{
path: "/home",
component: document.getElementById("home")
},
{
path: "/about",
component: document.getElementById("about")
},
{
path: "/user",
component: document.querySelector(".user")
},
]
//监听哈希值(页面锚点)的变化,切换div的显示
function check() {
//获取hash值(slice(1)为了移除#)如果获取不到默认是routes第0个的path
var hash = location.hash.slice(1) || routes[0].path;
console.log(hash);
//遍历routes 如果hash值等于对应的path值,让当前的组件component显示,否则隐藏
routes.forEach(item => {
// 如果当前遍历对象的path等于hash值
if (item.path === hash) {
//显示当前对应对象的compoent
item.component.style.display = "block";
} else {
//否则隐藏
item.component.style.display = "none";
}
})
}
check();
// hashchange事件是指当页面的的哈希(锚点)值发生变化时候触发事件
window.addEventListener("hashchange", check)
//通过监听哈希值的变化,遍历配置,如果配置的path等于当前的hash值,让对应的component显示,反之隐藏
</script>
</body>
</html>
效果图