当前位置：主页 > 查看内容

vue的hash值原理也是table切换实例代码

发布时间：2021-06-19 00:00| 有 位朋友查看

简介：我希望大家敲一遍 !DOCTYPE htmlhtmlheadmeta charset="utf-8"title/titlestyle.pagesdiv{display: none;}/style/headbodypa href="#/" rel="external nofollow" aaa/aa href="#/about" rel="external nofollow" bbb/aa href="#/user" rel="external nofollo……

我希望大家敲一遍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.pages>div{display: none;}
		</style>
	</head>
	<body>
		<p>
			<a href="#/" rel="external nofollow" >aaa</a>
			<a href="#/about" rel="external nofollow" >bbb</a>
			<a href="#/user" rel="external nofollow" >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>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

到此这篇关于vue的hash值原理也是table切换的文章就介绍到这了,更多相关vue hash原理内容请搜索站长技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长技术！


原文链接：https://m.jb51.net/article/202121.htm
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：windows如何把已安装的nodejs高版本降级为低版本(图文教程) 下一篇：element-ui点击查看大图的方法示例

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐