Vue中路由的原理

一、概念

通过改变 URL,在不重新请求页面的情况下,更新页面视图。

二、实现

更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式:

1.Hash — 利用 URL 中的hash("#");

2.利用 History interface 在HTML5中新增的方法。
    
先看下浏览器对象默认的对象属性location

Location对象的属性

Vue中路由的原理_第1张图片

Location对象的方法

Vue中路由的原理_第2张图片
下面是利用原生js实现Vue中路由的跳转

<style>
		.pages>div{ display: none;}
		/* 让pages直接子元素div全部隐藏 */
	</style>
	<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对应 页面元素节点
			//id是惟一的可以直接使用
			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;
			 console.log(location.hash)
			 //设置当前的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]; //重新设置当前显示的页面
				   }
			   })
			   //此处如果使用for循环的话更加合理,满足条件就break跳出循环,节约资源
			  // for(let i=0;i
				 //  if(hash==router[i].path){
					//   currentView.component.style.display='none';
					//   router[i].component.style.display="block";
					//   currentView=router[i];
					//   break;
				 //  }
			  // }
			}

		</script>
	</body>

你可能感兴趣的:(vue)