小tips：怎样实现简单的前端hash与history路由方式？

前端路由实现方式，主要有两种，分别是history和hash模式。

hash模式

不同路由对应的hash是不一样的，如何能够监听到URL中关于hash部分发生的变化？浏览器已经暴露给我们一个现成的方法hashchange,在hash改变的时候，触发该事件。

实现示例代码：

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title></title>

</head>

<style>

* {

	margin: 0;

	padding: 0;

	box-sizing:border-box;

}

html,body {

	height: 100%;

}

#content {

	height: calc(100% - 50px);

	display: flex;

	align-items: center;

	justify-content: center;

	font-size: 30px;

}

#nav {

	width: 100%;

	height: 50px;

	position: fixed;

	bottom: 0;

	left: 0;

	display: flex;

}

#nav a {

	width: 25%;

	display: flex;

	align-items: center;

	justify-content: center;

	border: 1px solid black;

}

#nav a:not(:last-of-type) {

	border-right: none;

}

</style>

<body>

<div id="content">内容区域</div>

<div id="nav">

	<a href="#/">首页</a>

	<a href="#/new-product">新品</a>

	<a href="#/shopping-cart">购物车</a>

	<a href="#/my">我的</a>

</div>

<script type="text/javascript">

class VueRouter {

	constructor(routes = []) {

		this.routes = routes;

		this.currentHash = ''; // 当前hash值

		window.addEventListener('load',this.refresh.bind(this),false);

		window.addEventListener('hashchange',this.refresh.bind(this),false);

	}

	// 获取hash

	getHash(url) {

		return url.indexOf('#') !== -1 ? url.slice(url.indexOf('#') + 1) : '/'

	}

	refresh(event) {

		let newHash = '';

		if(event.newURL) {

			newHash = this.getHash(event.newURL || '');

		} else {

			newHash = this.getHash(window.location.href);

		}

		this.currentHash = newHash;

		this.matchComponentCon();

	}

	// 匹配hash组件内容

	matchComponentCon() {

		let curRoute = this.routes.find(route => route.path === this.currentHash);

		if(!curRoute) {

			curRoute = this.routes.find(route => route.path === '/');

		}

		const { component } = curRoute;

		document.querySelector('#content').innerHTML = component;

	}

}

const router = new VueRouter([

	{path: '/',name: 'home',component: '<div>首页内容</div>'},

	{path: '/new-product',name: 'new-product',component: '<div>新品内容</div>'},

	{path: '/shopping-cart',name: 'shopping-cart',component: '<div>购物车内容</div>'},

	{path: '/my',name: 'my',component: '<div>我的内容</div>'}

])

</script>

</body>

</html>

效果如图所示：

当点击底部不同的菜单，中间区域显示对应菜单的内容。

history模式

HTML5提供的一个history全局对象，这个对象包含了关于我们访问网页（历史会话）的一些信息，history路由的实现要归功于它。

history它还暴露了一些方法，如：

window.history.go：可以跳转到浏览器会话历史中的指定的某一个记录页
window.history.forward：指向浏览器会话历史中的下一页，跟浏览器的前进按钮相同
window.history.back：返回浏览器会话历史中的上一页，跟浏览器的回退按钮功能相同
window.history.pushState：可以将给定的数据压入到浏览器会话历史栈中
window.history.replaceState：将当前的会话页面的url替换成指定的数据

而history路由的实现，主要就是依靠于pushState与replaceState实现的。这两个方法的特点：

改变当前页面的URL，不会刷新页面；
调用pushState方法会把当前的URL压入到浏览器的会话历史栈中，会让history.length加1，而replaceState是替换当前的这条会话历史，不会增加history.length;

我们是否可以通过pushState或replaceState能够监听URL变化这个动作，就可以实现不同路由页面的渲染处理，我们需要了解下事件处理程序popState,官网参考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event

每当激活同一文档中不同的历史记录条目时，popstate 事件就会在对应的window对象上触发。如果当前处于激活状态的历史记录条目是由history.pushState()方法创建的或者是由 history.replaceState() 方法修改的，则 popstate 事件的 state 属性包含了这个历史记录条目的 state 对象的一个拷贝。

备注：调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。popstate 事件只会在浏览器某些行为下触发，比如点击后退按钮（或者在 JavaScript 中调用 history.back() 方法）。即，在同一文档的两个历史记录条目之间导航会触发该事件。

从官网描述看，总结如下：

history.pushState和history.replaceState方法不会触发popstate事件
浏览器的某些行为会导致popstate事件，比如go、back、forward
popstate事件对象中的state属性，可以理解是我们在通过history.pushState或history.replaceState方法时，传入的指定的数据

结论就是popstate无法监听history.pushState和history.replaceState方法,既然不支持，那么我们重新写下这个history.pushState和history.replaceState方法。在这个方法中，也能够暴露出自定义的全局事件，然后再监听自定义的事件

就行了。

let _wr = function(type) {

	let orig = history[type];

	return function() {

		orig.apply(this,arguments);

		let e = new Event(type);

		e.arguments = arguments;

		window.dispatchEvent(e);

	}

}

history.pushState = _wr('pushState');

history.replaceState = _wr('replaceState');

执行上面的方法，相当于自定义了同名的pushState和replaceState自定义事件的触发绑定到了window上面,即是可以通过pushSate或者replaceState来执行自定义的事件，同时还执行了浏览器的history.pushState或者history.replaceState方法。

简单实现：

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title></title>

</head>

<style>

* {

	margin: 0;

	padding: 0;

	box-sizing:border-box;

}

html,body {

	height: 100%;

}

#content {

	height: calc(100% - 50px);

	display: flex;

	align-items: center;

	justify-content: center;

	font-size: 30px;

}

</style>

<body>

<div id="content">内容区域</div>

<button id="button1">首页</button>

<button id="button2">新品</button>

<button id="button3">购物车</button>

<button id="button4">我的</button>

<script type="text/javascript">

const button1 = document.querySelector('#button1');

const button2 = document.querySelector('#button2');

const button3 = document.querySelector('#button3');

const button4 = document.querySelector('#button4');

let _wr = function(type) {

	let orig = history[type];

	return function() {

		orig.apply(this,arguments);

		let e = new Event(type);

		e.arguments = arguments;

		window.dispatchEvent(e);

	}

}

history.pushState = _wr('pushState');

history.replaceState = _wr('replaceState');

button1.addEventListener('click',() => {

	const path = './home';

	const title = '首页';

	history.pushState({ path,title },title, path);

})

button2.addEventListener('click',() => {

	const path = './new-product';

	const title = '新品';

	history.pushState({ path,title },title, path);

})

button3.addEventListener('click',() => {

	const path = './shopping-cart';

	const title = '购物车';

	history.pushState({ path,title },title, path);

})

button4.addEventListener('click',() => {

	const path = './my';

	const title = '我的';

	history.pushState({ path,title },title, path);

})

class VueRouter {

	constructor(routes = []) {

		this.routes = routes;

		this.currentUrl = '';

		this.matchComponentCon();

		window.addEventListener('pushState', e => {

			console.log(e)

			this.currentUrl = e.arguments[2] && e.arguments[2].slice(e.arguments[2].indexOf('.') + 1);

			window.document.title = e.arguments[1];

			this.matchComponentCon();

		},false)

		// 监听浏览器的back、forward、go事件

		window.addEventListener('popstate', e => {

			const { path = '/', title } = e.state || {};

 			console.log(e)

			this.currentUrl = path.slice(path.indexOf('.') + 1);

			window.document.title = title;

			this.matchComponentCon();

		},false)

	}

	// 匹配路由页面内容

	matchComponentCon() {

		let curRoute = this.routes.find(route => route.path === this.currentUrl);

		if(!curRoute) {

			curRoute = this.routes.find(route => route.path === '/');

		}

		const { component } = curRoute;

		document.querySelector('#content').innerHTML = component;

	}

}

const router = new VueRouter([

	{path: '/',name: 'home',component: '<div>首页内容</div>'},

	{path: '/new-product',name: 'new-product',component: '<div>新品内容</div>'},

	{path: '/shopping-cart',name: 'shopping-cart',component: '<div>购物车内容</div>'},

	{path: '/my',name: 'my',component: '<div>我的内容</div>'}

])

</script>

</body>

</html>

history模式需要后端配合解决刷新页面404的问题。nginx配置如下：

location / {

  try_files $uri $uri/ /index.html;

}