浅入浅出前端单页面路由实现原理
Posted 凯小默
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浅入浅出前端单页面路由实现原理相关的知识，希望对你有一定的参考价值。
上一节了解了单页面，那么你知道前端单页面路由是怎么实现的吗？
说真的，我也不知道
接下来一起学习一下。
为什么 SPA 需要路由系统
因为缺少路由系统的 SPA 框架有其存在的弊端：
- 用户在使用过程中，url 不会发生变化，那么用户在进行多次跳转之后，如果一不小心刷新了页面，又会回到最开始的状态，用户体验极差。
- 由于缺乏路由，不利于 SEO，搜索引擎进行收录。
主流的前端路由系统是通过 hash 或 history 来实现的，下面先看看 Hash 模式
Hash 路由
hash 就是指 url 后的 # 号以及后面的字符。例如：https://blog.csdn.net/#kaimo313，那么 #kaimo313 就是 hash 值。
我们知道 url 上的 hash 本意是用来作锚点的，方便用户在一个很长的文档里进行上下的导航。
为什么 hash 能实现路由？
这是因为 hash 有一点很特殊：改变 url 的 hash 时，不会刷新页面，但是会触发相应的 hashchange 回调函数，使得 hash 能用来做路由控制。
实现改变 hash 刷新页面局部
下面我们实现一个功能：通过改变 hash，去改变 body 的背景色
效果如下：
实现的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hash</title>
</head>
<body>
<ul>
<li><a href="#/">turn white</a></li>
<li><a href="#/blue">turn blue</a></li>
<li><a href="#/green">turn green</a></li>
</ul>
<script>
// 改变 body 颜色
function changeBodyColor(color)
document.body.style.backgroundColor = color;
function Router()
this.routes = ; // routes 用来存放不同路由对应的回调函数
this.currentUrl = "";
// 每个不同的hash值，对应不同的函数调用处理。
Router.prototype.route = function(path, callback)
this.routes[path] = callback || function() ;
Router.prototype.refresh = function()
console.log('触发一次 hashchange，hash 值为:', location.hash);
this.currentUrl = location.hash.slice(1) || '/';
this.routes[this.currentUrl]();
// init 用来初始化路由，在 load 事件发生后刷新页面，并且绑定 hashchange 事件，当 hash 值改变时触发对应回调函数
Router.prototype.init = function()
// 页面在第一次加载时并不会触发hashchang事件，只有改变了hash值后才会触发。
window.addEventListener("load", this.refresh.bind(this), false);
window.addEventListener("hashchange", this.refresh.bind(this), false);
let hashRouter = new Router();
hashRouter.init();
hashRouter.route("/", function()
changeBodyColor("white");
)
hashRouter.route("/blue", function()
changeBodyColor("blue");
)
hashRouter.route("/green", function()
changeBodyColor("green");
)
</script>
</body>
</html>
或者使用类似发布订阅模式的方式，使用 ES6 的 class 实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li><a href="#/">turn white</a></li>
<li><a href="#/blue">turn blue</a></li>
<li><a href="#/green">turn green</a></li>
</ul>
<script>
class Router
constructor()
this.routes = ;
this.currentUrl = "";
// 改变 body 颜色
changeBodyColor(color)
document.body.style.backgroundColor = color;
route(path, callback)
this.routes[path] = callback || function() ;
refresh()
console.log('触发一次 hashchange，hash 值为:', location.hash);
this.currentUrl = location.hash.slice(1) || '/';
this.routes[this.currentUrl]();
// init 里面需要添加 load hashchange 事件，触发刷新方法
init()
window.addEventListener("load", this.refresh.bind(this), false);
window.addEventListener("hashchange", this.refresh.bind(this), false);
let hashRouter = new Router();
hashRouter.init();
hashRouter.route("/", function()
hashRouter.changeBodyColor("white");
)
hashRouter.route("/blue", function()
hashRouter.changeBodyColor("blue");
)
hashRouter.route("/green", function()
hashRouter.changeBodyColor("green");
)
</script>
</body>
</html>
我们可以发现 hash 模式的情况下 url 上会有一个 # 号，很不美观，有没有什么解决方案？答案就是使用 history 模式。
那么什么是 history 模式？
History 路由
我们可能使用过 history 的部分 api 比如：
history.go(-1); // 后退一页
history.go(2); // 前进两页
history.forward(); // 前进一页
history.back(); // 后退一页
在 HTML5 规范中，history 新增了以下几个 API
history.pushState(); // 添加新的状态到历史状态栈
history.replaceState(); // 用新的状态代替当前状态
history.state // 返回当前状态对象
下面具体了解一下 pushState，state，replaceState，popstate 事件。
pushState
History.pushState() 方法用于在历史中添加一条记录。
window.history.pushState(state, title, url)
- state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填null。
- title：新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。
- url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
举个例子：
假定当前网址是 history.html，使用 pushState() 方法在浏览记录（History 对象）中添加一个新记录。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>history1 页面</title>
</head>
<body>
<script>
var stateObj = foo: 'bar' ;
history.pushState(stateObj, 'page 2', 'history2.html');
</script>
</body>
</html>
我们发现添加新记录后，浏览器地址栏立刻显示 history2.html，但并不会跳转到 history2.html，甚至也不会检查 history2.html 是否存在，它只是成为浏览历史中的最新记录。
然后我们在 url 栏里输入 https://blog.csdn.net/kaimo313 我的博客地址，回车之后进入到我的博客之后，在点击返回上一次浏览的页面
我们会发现，此时的页面已经变成了 history2.html。
总之，pushState() 方法不会触发页面刷新，只是导致 History 对象发生变化，地址栏会有反应。
注意：
如果 pushState 想要插入一个跨域的网址，导致报错。这样设计的目的是，防止恶意代码让用户以为他们是在另一个网站上，因为这个方法不会导致页面跳转。
state
使用 pushState 方法之后，就可以用 History.state 属性读出状态对象。
var stateObj = foo: 'bar' ;
history.pushState(stateObj, 'page 2', 'history2.html');
console.log('history.state：', history.state);
replaceState
History.replaceState() 方法用来修改 History 对象的当前记录，其他都与 pushState() 方法一模一样。
我们来举个例子：假定当前网页是 kaimo.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kaimo</title>
</head>
<body>
</body>
</html>
第1步执行： URL 显示为 http://127.0.0.1:5500/kaimo.html?page=1
history.pushState(page: 1, 'kaimo 1', '?page=1')
第2步执行： URL 显示为 http://127.0.0.1:5500/kaimo.html?page=2
history.pushState(page: 2, 'kaimo 2', '?page=2')
第3步执行： URL 显示为 http://127.0.0.1:5500/kaimo.html?page=3
history.replaceState(page: 3, 'kaimo 3', '?page=3')
第4步执行： URL 显示为 http://127.0.0.1:5500/kaimo.html?page=1，回退之后变成page=1了。
history.back()
第5步执行： URL 显示为 http://127.0.0.1:5500/kaimo.html，再次回退之后变成初始页了。
history.back()
第6步执行： URL 显示为 http://127.0.0.1:5500/kaimo.html?page=3。
history.go(2) // 前进两页
popstate 事件
每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。
注意，仅仅调用
pushState()方法或replaceState()方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用 javascript 调用History.back()、History.forward()、History.go()方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
使用的时候，可以为popstate事件指定回调函数。
window.onpopstate = function (event)
console.log('location: ' + document.location);
console.log('state: ' + JSON.stringify(event.state));
;
// 或者
window.addEventListener('popstate', function(event)
console.log('location: ' + document.location);
console.log('state: ' + JSON.stringify(event.state));
);
举个例子：比如从 kaimo.html 跳转到 kaimo.html?page=1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kaimo</title>
</head>
<body>
<script>
window.addEventListener('popstate', function(event)
console.log('location: ' + document.location);
console.log('state: ' + JSON.stringify(event.state));
console.log('state2: ' + JSON.stringify(history.state));
);
</script>
</body>
</html>
回调函数的参数是一个 event 事件对象，它的 state 属性指向 pushState 和 replaceState 方法为当前 URL 所提供的状态对象（即这两个方法的第一个参数）。这个 state 对象也可以直接通过 history.state 对象读取。
注意，页面第一次加载的时候，浏览器不会触发popstate事件。
思路分析
通过上面的分析我们知道 history.pushState 或者 history.replaceState 也能做到改变 url 的同时，不会刷新页面。
hash 的改变会触发 onhashchange 事件，但是我们无法监听到 history 的改变事件。
那有没有什么方法实现？
答案是有的，如果我们能罗列出所有可能改变 history 的途径，然后在这些途径 一 一 进行拦截，也一样相当于监听了 history 的改变。
url 的改变只能由以下 3 种途径引起：
- 点击浏览器的前进或者后退按钮；
- 点击 a 标签；
- 在 JS 代码中直接修改路由
对于第 1 种，HTML5 规范中新增了一个 onpopstate 事件，通过它便可以监听到前进或者后退按钮的点击。
对于第 2 和 第 3 种，可以看成是一种，因为 a 标签的默认事件可以被禁止，进而调用 JS 方法。
思路图：
代码实现
下面是我写的简易版本，实现了三种途径修改 url 渲染页面的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>history 路由</title>
<包学会之浅入浅出Vue.js：升学篇