vue的hash值原理，也是table切换。

最新推荐文章于 2024-04-05 00:00:00 发布

然陈

最新推荐文章于 2024-04-05 00:00:00 发布

阅读量3.7k

点赞数 23

本文链接：https://blog.csdn.net/cj521zhihui/article/details/109784027

版权

我希望大家敲一遍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.pages>div{display: none;}
		</style>
	</head>
	<body>
		<p>
			<a href="#/">aaa</a>
			<a href="#/about">bbb</a>
			<a href="#/user">cccc</a>
		</p>
		<div class="pages">
			<div id="home">首页</div>
			<div id="about">关于我的页面</div>
			<div class="user">用户中心</div>
		</div>
	</body>
	<script type="text/javascript">
		//hash 和页面一一对应起来
		//router 配置
		var router = [
			{path:"/",component:document.getElementById("home")},
			{path:"/about",component:document.getElementById("about")},
			{path:"/user",component:document.querySelector(".user")},
		]
		
		// 默认hash
		window.location.hash = "#/";
		// 默认页面
		var currentView = router[0].component;
		currentView.style.display="block";
		
		
		
		window.onhashchange=()=>{
			//通过判断hash切换div页面
			console.log(location.hash);
			//获取hash值,不要井号
			var hash = location.hash.slice(1);
			router.forEach(item=>{
				if(item.path==hash){
					//先隐藏之前显示的页面
					currentView.style.display = "none";
					// 显示对应的组件
					item.component.style.display = "block";
					//重新设置当前显示的页面是哪个div
					currentView = item.component;
				}
			})
		}
	</script>
</html>

在这里插入图片描述

然陈

关注

23
点赞
踩
13

收藏

觉得还不错? 一键收藏
30
评论
vue的hash值原理，也是table切换。

我希望大家敲一遍<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .pages>div{display: none;} </style> </head> <body> <p> <a href="#/">aaa</
复制链接

扫一扫