前端路由之 Hash 路由

Hash 路由的实现

使用过框架路由的人肯定都有注意到url中的#号，这个#号就是哈希，为什么hash路由页面不会跳转——还记得a链接的锚点是怎么实现的吗。

代码

<ul>
<li><a href="#/">index</a></li>
<li><a href="#/item">item</a></li>
<li><a href="#/list">list</a></li>
</ul>
<br>
<br>
<div>头部</div>
<h1 class='result'></h1>

function Router() {
// 路由储存
this.routes = {};
// 当前路由
this.currentUrl = '';
}
Router.prototype = {
// 路由处理
route: function (path, callback) {
this.routes[path] = callback || function(){};
},
// 页面刷新
refresh: function () {
// 当前的hash值
this.currentUrl = location.hash.slice(1) || '/';
// 执行hash值改变后相对应的回调函数
this.routes[this.currentUrl]();
},
// 页面初始化
init: function () {
// 页面加载事件
window.addEventListener('load', this.refresh.bind(this), false);
// hash 值改变事件
window.addEventListener('hashchange', this.refresh.bind(this), false);
}
}

// 全局挂载
window.Router = new Router();
// 初始化
window.Router.init();

let obj = document.querySelector('.result');

function changeConent (cnt) {
obj.innerHTML = cnt
}

// 匹配路由做相应的操作
Router.route('/', () => {
changeConent("当前是首页");
})

Router.route('/item', () => {
changeConent('当前是item页面');
})

Router.route('/list', () => {
// ajax 的数据就可以这样去拼接
setTimeout(() => {
obj.innerHTML = '<h1 style="color: red">Hello World</h1>'
}, 1000)
})