vue路由基本原理

最新推荐文章于 2022-06-18 19:48:10 发布

圣京都

最新推荐文章于 2022-06-18 19:48:10 发布

阅读量580

点赞数

分类专栏： vue 案例文章标签： vue

本文链接：https://blog.csdn.net/qq_40994735/article/details/108399870

版权

vue 同时被 2 个专栏收录

45 篇文章 1 订阅

订阅专栏

案例

20 篇文章 0 订阅

订阅专栏

<!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>

圣京都

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue路由基本原理

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .pages>div { display: none; } /* 让pages直接子元素div全部隐藏 */ </style> </head> <body> <p>&
复制链接

扫一扫