摘要 今天小编跟大家讲解下有关两种前端路由的实现方式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关两种前端路由的实现方式

今天小编跟大家讲解下有关两种前端路由的实现方式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关两种前端路由的实现方式 的相关资料，希望小伙伴们看了有所帮助。

两种前端路由的实现方式

前后端分离开发模式，后端会把路由控制丢在前端，这几天再开发单页面小的项目，手动撸了个路由。前端路由实现有两种方法。

1. history.pushState/ history.replaceState / window.popstate

html5 History API包括2个方法：history.pushState()和history.replaceState()，和1个事件：window.onpopstate。

pushState

history.pushState(stateObject, title, url)，包括三个参数。

stateObject 存储该url对应的状态对象，该对象可在onpopstate事件中获取，也可在history对象中获取title 目前浏览器未实现，为nul路径url，般设置为相对路径，如果设置为绝对路径时需要保证同源

pushState函数向浏览器的历史堆栈压入一个url为设定值的记录，并改变历史堆栈的当前指针至栈顶。

replaceState

该接口与pushState参数相同，含义也相同。唯一的区别在于replaceState是替换浏览器历史堆栈的当前历史记录为设定的url。需要注意的是，replaceState不会改动浏览器历史堆栈的当前指针。

onpopstate

该事件是window的属性。该事件会在调用浏览器的前进、后退以及执行history.forward、history.back、和history.go触发，因为这些操作有一个共性，即修改了历史堆栈的当前指针。在不改变document的前提下，一旦当前指针改变则会触发下面是简易版本的实现方式：

<a data-href="http://www.aidi.net.cn/post"></a><a data-href="http://www.aidi.net.cn/login"></a>const Router = [];const addRoute = (path = '', handle = () => {}) => { let obj = { path, handle } Router.push(obj);}//添加路由定义addRoute('/post', function() { //do something});addRoute('/login', function() { //do something})//路由处理const routeHandle = (path) => { Router.forEach((item, index) => { if(item.path === path) { item.handle.apply(null, [path]); return true; } }) return false;}//拦截默认的a标签行为document.addEventListener('click', function(e) { let dataset = e.target.dataset; if(dataset) { if(routeHandle(dataset.href)) { //阻止默认行为 e.preventDefault(); } }});2.hash + location.onhashchange

实现原理是通过监听hash变化，触发onhashchange事件回调。hash的变化会导致历史记录栈的变化，从而实现路由。

一个简易版的router实现源码，功能如下

切换页面异步加载js异步传参原文来源：http://yuanhehe.cn/2017/06/19/两种前端路由的实现方式/

来源：爱蒂网