SPA——spa的作用、spa如何实现、spa与普通页面跳转的区别、代码示例

钟意冉冉

已于 2023-01-09 14:46:58 修改

阅读量545

点赞数

文章标签：前端 vue.js 前端框架 javascript spa

于 2022-07-30 11:42:12 首次发布

本文链接：https://blog.csdn.net/ranran0306/article/details/126069876

版权

一、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>

效果图

钟意冉冉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SPA——spa的作用、spa如何实现、spa与普通页面跳转的区别、代码示例

SPA——spa的作用、spa如何实现、spayu普通页面跳转的区别、代码示例
复制链接

扫一扫

SPA——spa的作用、spa如何实现、spa与普通页面跳转的区别、代码示例

一、spa

二、实现

三、区别

四、代码示例

“相关推荐”对你有帮助么？