单页应用中,页面的跳转如果只是通过js控制时,浏览器的前进/后退会离开当前url。另外通过url收藏当前页面后重新打开时会跳到应用的初始状态。
用前端路由的方法可以解决上述问题。url的hash部分改变,不会反生页面跳转,但会触发hashchange事件,再通过js显示不同的组件。
简单实现如下:
<ul>
<li><a href="#/detail">detail</a></li>
<li><a href="#/error">error</a></li>
</ul>
function Router() {
this.routes = {};//存储hash和方法的映射
this.currentUrl = '';
}
//注册路径和方法的映射
Router.prototype.route = function(path, callback) {
this.routes[path] = callback;
};
//hash改变时触发的事件
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();
Router.route('/', function() {
console.log("主页");
});
Router.route('/detail', function() {
console.log("跳转到详情页");
});
Router.route('/error', function() {
console.log("出错了");
});