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