两种格调的实现原理
- 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));