vue路由基本原理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.pages>div {
				display: none;
			}

			/* 让pages直接子元素div全部隐藏 */
		</style>
	</head>
	<body>
		<p><a href="#/">首页</a> | <a href="#/about">关于我们</a> <a href="#/user">用户中心</a></p>
		<div class="pages">
			<div id="home">
				<h1>首页内容</h1>
			</div>
			<div id="about">
				<h1>关于页面内容</h1>
			</div>
			<div class="user">
				<h1>用户页面</h1>
			</div>
		</div>
		<script>
			// router 页面切换的配置数组
			// 做一个配置让hash对应 页面元素节点
			const router = [{
					path: "/",
					component: home
				},
				{
					path: "/about",
					component: about//这个对于div的id或者class 但是最好是id
				},
				{
					path: "/user",
					component: document.querySelector(".user")
				}
			]
			var currentView = router[0]; //默认显示页面 第0个
			// 当hash发生改变时候 
			location.hash = "#" + currentView.path; //设置当前的hash值为默认的第0个配置的path值
			// 只要hash发生变化 触发 onhashchange事件
			window.onhashchange = function(e) {
				var hash = window.location.hash.slice(1); //获取到当前的哈希值.截取从第一位到最后（去掉#号）
				//遍历每一个配置项
				router.forEach((item, index) => {
					if (hash == item.path) { //如果hash值与 当前配置项的path匹配
						currentView.component.style.display = "none"; //默认显示页面对应的组件隐藏
						item.component.style.display = "block"; //配置项对应的组件显示
						currentView = router[index]; //重新设置当前显示的页面
					}
				})
			}
		</script>
	</body>
</html>
猜你喜欢
