vue 路由原理--js版

Love The Way You Lie 2022-12-03 15:51 156阅读 0赞

# 同一页面切换 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjMyODE0NA_size_16_color_FFFFFF_t_70_pic_center]

<!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 type="text/javascript">
    			// router 页面切换的配置数组
    			//做一个配置 让hash对应div节点
    			const router = [
    				{ path:"/" ,component:home},
    				{ path:"/about" ,component:about},
    				{ 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); //获取到当前的哈希值.截取从第一位到最后（去掉#号）
    				console.log(hash);
    				 //遍历每一个配置项
    				router.forEach((item,index)=>{ 
    					if(hash == item.path){ //如果hash值与 当前配置项的path匹配
    						currentView.component.style.display = "none";//默认显示页面对应的组件隐藏
    						item.component.style.display="block";//配置项对应的组件显示
    						currentView = router[index];//重新设置当前显示的页面
    					}
    				})
    				
    			}
    			
    			
    			
    			
    			//简单解释
    			//原理，hash发生改变
    			// window.οnhashchange=function(e){ 
    			// var hash = window.location.hash.slice(1);
    			// console.log(hash);
    				
    			// if(hash =="/"){ 
    			// home.style.display="block";
    			// about.style.display="none";
    			// }
    			// if(hash =="/about"){ 
    			// home.style.display="none";
    			// about.style.display="block";
    			// }
    			// }
    		</script>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjMyODE0NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/8124fc1ae5254622ab9de73a2b5ed5f8.png