标签：重要 分工合作 char api head win 配置路由 介绍 meta
SPA就是单页面应用，即single page application，通过看代码就可以发现，整个网站就只有一个Html文件。
目前来说，无论是vue，还是react，spa的路由实现方式无非就是以下两者：
hash用的还是比较多的，但是这种方式的url会比较丑陋，会出现 #； 而history api就可以很好的解决这个问题，但是需要后端配置，并且由于是html5中的api，所以兼容性还不是很好，用的时候需要确定你的用户，再做决定。
自己动手，丰衣足食！ 我们自己来写一个router，也许对齐理解就会更加明白了。一般，我们在使用vue和react的router的时候，不难发现他们都是构造函数，然后生成一个实例，即面向对象的方式。
这里当然也需要使用面向对象的方式来实现，这种方式的可扩展性、可维护性都会比较好一些。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>router</title> <style> html, body { width: 100%; height: 100%; margin: 0; } div.router-wrap { width: 100%; height: 100%; background: #fefefe; } a { padding: 10px; color: pink; font-size: 25px; font-weight: bold; text-decoration: none; } </style> </head> <body> <div class="router-wrap"> <a href="#/black">黑色</a><br> <a href="#/green">绿色</a><br> <a href="#/red">红色</a> </div> <script> // 创建Router构造函数 // currentHash为当前hash值，routes为路径对象 function Router() { this.currentHash = ‘/‘; this.routes = {}; } // 注册路径，每个路径对应一个回调函数。 Router.prototype.route = function (path, callback) { this.routes[path] = callback || function () { alert(‘未定义回调函数！‘); } } // 更新页面函数 Router.prototype.refresh = function () { this.currentHash = location.hash.slice(1) || ‘/‘; this.routes[this.currentHash](); } // 初始化 Router.prototype.init = function () { var self = this; window.addEventListener(‘load‘, function () { self.refresh(); }, false); window.addEventListener(‘hashchange‘, function () { self.refresh(); }); } </script> <script> var wrap = document.querySelector(‘.router-wrap‘); window.Router = new Router(); Router.route(‘/‘, function () { wrap.style.backgroundColor = ‘#fefefe‘; }); Router.route(‘/black‘, function () { wrap.style.backgroundColor = ‘black‘; }); Router.route(‘/green‘, function () { wrap.style.backgroundColor = ‘green‘; }); Router.route(‘/red‘, function () { wrap.style.backgroundColor = ‘red‘; }); Router.init(); </script> </body> </html>
上面这段代码的思路并不难理解。
首先创建一个Router构造函数，初始化当前的url和一个routes对象。
接着定义了三个方法：
上面使用的hash方法实现路由固然不错，但是也是存在一定的问题的，就是太丑~ 如果在微信中使用，看不到url倒也无所谓，但是如果在一般的浏览器中使用就会遇到问题了。所以这里使用 history api来实现。
在html5中的history api包括两个方法history.pushState()和history.replaceState()，包含一个事件history.onpopstate，我们先进行简单的介绍：
history.pushState(stateObj, title, url)
pushState向浏览器的历史记录栈中压入一个历史记录，所以这里的push和pop就比较好理解了。
history.replaceState()
这个就比较好理解了，接受的参数都是一样的，作用就是替换当前历史记录栈中的记录。
在浏览器前进、后退时触发，一般就是历史记录栈中的指针改变的时候就会触发这个事件了。
有了这些基本概念之后，实现一个简单的路由就比较简单了，如下所示：
标签：重要 分工合作 char api head win 配置路由 介绍 meta
原文地址：http://www.cnblogs.com/zhuzhenwei918/p/7420972.html
