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

时间:2020-12-14 然陈人气:0

这篇文章主要介绍了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" >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>

在这里插入图片描述

加载全部内容