两种格调的实现原理
- hash 模式：通过扭转location.hash( 注：只扭转url的hash值而不是url的主体局部，顾不会刷新页面、不会发送http申请)，而后由浏览器监听事件onhashchange事件来监听hash值的变动并触发绑定的回调函数，从而来展现不同的页面内容。
以下是一个简略的hash路由的实列代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>router</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> function Router() { this.routes = {}; this.currentUrl = ''; } Router.prototype.route = function(path, callback) { this.routes[path] = callback || function(){}; }; Router.prototype.refresh = function() { this.currentUrl = location.hash.slice(1) || '/'; this.routes[this.currentUrl](); }; Router.prototype.init = function() { window.addEventListener('load', this.refresh.bind(this), false); window.addEventListener('hashchange', this.refresh.bind(this), false); } window.Router = new Router(); window.Router.init(); var content = document.querySelector('body'); // change Page anything function changeBgColor(color) { content.style.backgroundColor = color; } Router.route('/', function() { changeBgColor('white'); }); Router.route('/blue', function() { changeBgColor('blue'); }); Router.route('/green', function() { changeBgColor('green'); });</script></body></html>- HTML5 history模式：通过history interface 新增的pushState、replaceState办法以及现有的go、back、forward办法来扭转url（注：能够扭转url的主体局部,顾在间接拜访嵌套路由时，必须配有该门路所对应的资源否则会呈现404的状况，但能够通过vue的redirect重定向到index页面或者404页面，来解决此问题）,而后通过window.popState事件 来监听url变动并执行对应的回调函数，从而来展现不同的页面内容。
以下是一个简略的history路由的实列代码：
class Router { constructor() { this.routes = new Map(); this.init(); } change(e) { // 避免为null const { path } = e.state || {}; this.implement(path); } init() { window.addEventListener("popstate", this.change.bind(this)); window.addEventListener("load", () => { const { pathname } = location; history.replaceState({ path: pathname }, "", pathname); this.implement(pathname); }); } implement(path) { if (!this.routes.has(path)) { return; } const fn = this.routes.get(path); typeof fn == "function" && fn.call(this, path); } go(num) { history.go(num); } route(state, fn) { this.routes.set(state, fn); } push(state) { history.pushState({ path: state }, "", state); this.implement(state); } replace(state) { history.replaceState({ path: state }, "", state); this.implement(state); }}以下是应用办法：
<ul> <li><a href="/">hash1</a></li> <li><a href="/hash2">hash2</a></li> <li><a href="/hash3">hash3</a></li></ul><div><button class="f">后退</button> <button class="b">后退</button></div>const color = { "/": "yellow", "/hash2": "#333", "/hash3": "#DDD"};const route = new Router();route.route("/", function(e) { document.body.style.background = color[e];});route.route("/hash2", function(e) { document.body.style.background = color[e];});route.route("/hash3", function(e) { document.body.style.background = color[e];});Array.from(document.links).forEach(fn => { fn.addEventListener("click", e => { e.preventDefault(); const href = fn.href; const { pathname } = new URL(href); route.push(pathname); });});const backOff = document.querySelector(".b");const forward = document.querySelector(".f");backOff.addEventListener("click", () => route.go(-1));forward.addEventListener("click", () => route.go(1));