用jQuery实现一个简单的前端路由

通过hash实现路由

//页面载入时，获取hash
let hash = location.hash || '#0';
let index = hash.slice(1); //把#号去掉
//点击时，给url添加hash
$tabs.click(function(ev) {
	let $tab = $(ev.target);
	index = $tab.index();
	location.hash = index; //此时地址栏后面变成#0
});

【点击查看在线代码】

监听window.onhashchange事件

上面代码通过手动设置location.hash，下面我们利用a标签自动设置锚点（即hash）的特点，利用hashchange监听hash变化实现路由

//当点击a链接时，会自动添加锚点(hash)，此时监听这个变化
window.onhashchange = function(ev){
	//console.log(ev); 打印出hash的详细信息
	index = location.hash.slice(1);
}

【点击查看在线代码】

利用a标签自动添加锚点时有个bug，比如：路由在#2的页面，里面有个<a href="#">回到顶部</a>，点击后会导致地址栏的hash被改动。
所以，不建议利用a标签自动添加hash

history模式：通过pathname实现路由

之前利用a标签自动添加锚点(即hash) <a href="#0"></a>，存在bug，可能点击其他a标签时不小心就把hash改变了

现在，通过path路径代替hash：<a href="./tab1"></a>

1 2	<a href="./tab1">tab1</a> <a href="./tab2">tab1</a>

点击第一个a标签后，会跳转到tab1.index，返回404，因为后端没有该页面

利用history.pushState()，无刷新地更改地址栏路径

history.pushState(state, title, url) : 无刷新的向浏览器历史最前方加入一条记录。

state(任意类型) ：需要保存的数据，这个数据在触发popstate事件时保存在event.state上。
title：一般传个空字符串
url(字符串) ：需要更改的url地址。

popstate事件：浏览器点击前进后退时触发的事件。event.state可以获取当前url下设置的state。

$tabs.click(function(ev) {
	ev.preventDefault(); //阻止默认跳转
	let path = ev.target.getAttribute('href');
	history.pushState('','',path); //改变地址栏路径，但是不向后端请求
});

【点击查看在线代码】

但是这种方法，无法分享页面给别人，当你访问http://www.xxx.com/tab1时，服务器会返回404
此时，需要在服务端进行一些设置才行
这就是vue-router中的mode:'history' vue:history 模式的原理

补充hash路由

<a href="#/detail">详情页</a>
<h1 id="detail">详情页</h1>
<a href="#/info">消息页</a>
<h1 id="info">消息页</h1>
<a href="#/me">我的</a>
<h1 id="me">我的</h1>

window.onhashchange = function(ev){
	let hash = location.hash.slice(2);
  $('h1').hide();
  $(`#${hash}`).show();
}

【点击查看在线代码】