一、概念
通过改变 URL，在不重新请求页面的情况下，更新页面视图。
二、实现
更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：
1.Hash — 利用 URL 中的hash("#");
2.利用 History interface 在HTML5中新增的方法。
先看下浏览器对象默认的对象属性location
Location对象的属性
Location对象的方法
下面是利用原生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<router.length;i++){
// if(hash==router[i].path){
// currentView.component.style.display='none';
// router[i].component.style.display="block";
// currentView=router[i];
// break;
// }
// }
}
</script>
</body>