主页 / 网络编程 /

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

网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要介绍了vue的hash值原理也是table切换,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

我希望大家敲一遍

<!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" ></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:"/",ponent:document.getElementById("home")},
			{path:"/about",ponent:document.getElementById("about")},
			{path:"/user",ponent:document.querySelector(".user")},
		]
		
		// 默认hash
		window.location.hash = "#/";
		// 默认页面
		var currentView = router[0].ponent;
		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.ponent.style.display = "block";
					//重新设置当前显示的页面是哪个div
					currentView = item.ponent;
				}
			})
		}
	</script>
</html>



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

上一篇：windows如何把已安装的nodejs高版本降级为低版本 下一篇：element-ui点击查看大图的方法示例

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by