单页面应用路由的实现方式

好久不曾写博客了，九月以来一直忙着笔试面试，都已经两旬过去了，如今还是两手空空，再怎么受挫，再怎么不如意，该走的路一步都不能少，今天就来总结下面试时被问：到单页面应用的路由是如何实现的？

如今前端框架层出不穷，手机端单页面应用越来越多的出现在人们的视野中，作为前端开发者，掌握一两中主流框架是很有必要的，了解ajax的都知道ajax异步刷新页面是不会存在历史记录中的，也就是我们不能通过浏览器的前进和后退按钮来跳转页面，但是聪明的猿们怎么会没有办法呢？猿们通过location.hash+hashchange来实现，也可以通过history.pushState+popstate来实现。下面看一下两种方法如何来使用。

一 . location.hash+hashchange

原理：location.hash获得的是浏览器地址栏url的散列部分，也就是/后面的内容，我们可以通过改变location.hash的值，来改变地址栏的url地址，一旦地址栏的url改变，就会触发hashchange事件，我们可以在该事件中添加回调函数，从而来刷新页面的内容。

具体看下面的代码：

function Router (){
        this.routers = {};
        this.currentUrl = '';
    }

    Router.prototype.toRouter = function (path, callback){
        this.routers[path] = callback;
    }

    Router.prototype.refresh = function (){
        this.currentUrl = location.hash.slice(1) || '/';
        this.routers[this.currentUrl]();
    }

    Router.prototype.init = function (){
        window.addEventListener('load', this.refresh.bind(this), false);
        //监听url改变的事件，触发回调函数
        window.addEventListener('hashchange', this.refresh.bind(this), false);
    }

    var router = new Router(); 
    router.init();

    function changecolor(color){
        var body = document.getElementsByTagName('body')[0];
        body.style.backgroundColor = color;
    }

    //为每个url添加回调函数，来刷新页面
    router.toRouter('/',changecolor.bind(null,'skyblue'));
    router.toRouter('/blue',changecolor.bind(null,'blue'));
    router.toRouter('/green',changecolor.bind(null,'green'));

二 . history.pushState +popstate

先说一下pushState方法的参数，history.pushState(state, title, url)。该方法有三个参数，第一个state是一个json对象，在触发popstate事件是很有用；第二个是一个字符串，目前大多数浏览器忽略该参数，所以一般传值为null就可以了；第三个参数是url地址，也是一个字符串。

原理：点击页面的url或者在地址栏输出url，将该url和定义好的state对象加入浏览器历史记录中，此时导航栏的地址就为当前新加入的地址，只要点击浏览器的前进后退按钮，就会触发popstate事件，就可以执行事件绑定的方法来更新页面，从而达到回退前进的效果。

代码：

    history.pushState({
        name: 'red',
        url: '/red',
        title: '红色页面'
    }, null, '/red');

    history.pushState({
        name: 'green',
        url: '/green',
        title: '绿色页面'
    }, null, '/green');

    window.addEventListener('popstate', function (e) {
        //伪函数，只是模仿事件响应之后的操作
        ajax(e.state.url, callback);
    }, false);

还有一个history.replaceState，只是替换当前的url，不会加入历史记录中。

以上这两种方式就是单页面应用如何实现路由刷新的方式，很惭愧，学习前端这么久了，才知道这两种方法，希望可以对正在学习的大家有所帮助。

单页面应用路由的实现方式

猜你喜欢