vue項目中hash值的原理是什么

發(fā)布時間：2020-12-15 15:42:22 來源：億速云閱讀：460 作者：Leah 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)vue項目中hash值的原理是什么，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

具體如下：

<!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">關(guān)于我的頁面</div>
			<div class="user">用戶中心</div>
		</div>
	</body>
	<script type="text/javascript">
		//hash 和頁面一一對應(yīng)起來
		//router 配置
		var router = [
			{path:"/",component:document.getElementById("home")},
			{path:"/about",component:document.getElementById("about")},
			{path:"/user",component:document.querySelector(".user")},
		]
		
		// 默認(rèn)hash
		window.location.hash = "#/";
		// 默認(rèn)頁面
		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";
					// 顯示對應(yīng)的組件
					item.component.style.display = "block";
					//重新設(shè)置當(dāng)前顯示的頁面是哪個div
					currentView = item.component;
				}
			})
		}
	</script>
</html>

關(guān)于vue項目中hash值的原理是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

vue項目中hash值的原理是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽