前端单页面应用路由

单页面应用中，路由由前端控制，前端实现路由主要有两种方式：

• 一是HTML5推出的history API，由pushState()记录操作历史，监听popstate事件来进行视图切换；
• 二是使用hash值，通过监听hashchange事件来进行视图切换

 

以下是一个路由示例：

<div id="route">
    <a href="#/page1">page1</a>
    <a href="#/page2">page2</a>
    <a href="#/page3">page3</a>
</div>

<div id="content"></div>

var util = {
    history: !!window.history && window.history.pushState,
    hashchange: 'onhashchange' in window
}

window.onload = function () {
var router = new Router();


　  // 路由配置
    router.when('/page1', {
        template: '<h1>page1</h1>'
    }).when('/page2', {
        template: '<h1>page2</h1>'
    }).when('/page3', {
        template: '<h1>page3</h1>'
    }).otherwise('/page1')

    router.fireUrlChange();


if(util.history) {
// 页面地址改变，更新页面
        $(window).on('popstate', function () {
            router.fireUrlChange();
        })
    }

if(util.hashchange) {
// hash值改变时更新页面
        $(window).on('hashchange', function () {
            router.fireUrlChange();
        });
    }


}


function Router() {
this.routers = {};
}
Router.prototype = {
    constructor: Router,

/**
     * 添加路由
     * @param path
     * @param route
     * @returns {Router}
*/
    when: function (path, route) {
this.routers[path] = route;

return this;
    },

/**
     * 首次加载路由
     * @param url
*/
    otherwise: function (url) {
this.newUrl = url;
    },

/**
     * 路由改变时触发
*/
    fireUrlChange: function () {

// 首次加载otherwise路由
if(!location.hash) {
if(util.history) {
                history.pushState(null, '', location.href+'#'+this.newUrl);
            }
if(util.hashchange) {
                location.hash = this.newUrl;
            }

        }

this.newUrl = location.hash.substring(1);

// 路由没有变化
if(this.newUrl === this.lastUrl) {
return;
        }

// 路由发生变化
this.lastUrl = this.newUrl;


//更新页面
var $content = $('#content');
        $content.html(this.routers[this.newUrl].template);

    }

}