前端路由

1.什么是前端路由？

• 路由是根本不同的Url地址展示不同的内容或页面
• 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url不同返回不同的页面来实现。

2.什么时候使用端着路由？

• 在单页面应用，大部分页面结构不变，只改变部分内容的时候使用

3.前端路由有什么优点和缺点？

　　优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户

　　缺点：使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存，

如何用JavaScript实现前端路由

html部分：

<div class="container"> 
    <nav class="mainMenu"> 
        <ul> 
            <li><a href="#/">首页</a></li> 
            <li><a href="#/page1">页面1</a></li>
            <li><a href="#/page2">页面2</a></li> 
            <li><a href="#/page3">页面3</a></li> 
        </ul> 
    </nav>
     <div class="content"></div> 
</div>                

这里有几个带#号的锚链接，点击不同的锚链接url里会产生不同的hash，如#/page1、#/page2等，这个值可以通过location.hash获取。

同时，每次hash的变化我们还可以通过onhashchange事件来监听，然后做出相应的处理，下面就来看一下具体的实现：

Router处理的核心代码：

;(function () {
    function Router () {} 
    Router.prototype.route = function ( path, callback ) { 
        var url = location.hash.slice(1) || '/'; // 刷新时的处理  
        window.addEventListener('load', function () { 
            if ( url == path ) {    
                callback&&callback(); 
            } 
        }, false); // hash变化时的处理
        window.addEventListener('hashchange', function () { 
            url = location.hash.slice(1) || '/'; 
            if ( url == path ) { 
                callback&&callback(); 
            } 
        }, false); 
    }; 
    window.Router = new Router(); 
})();    

Router注册，注册方式就是Router.route(path, callback)的格式：

var content = document.querySelectorAll('.content'); // 测试函数，这里可以放一些ajax处理之类的 
function loadContent ( text ) { 
    content[0].innerHTML = text; 
}
 // 注意：这里的path要和html里面锚链接对应
 // 如：‘#/’对应‘/’, '#/page2'对应'/page2' 
Router.route('/', function () {
    loadContent('这是首页'); 
});
Router.route('/page1', function () { 
    loadContent('这是页面1'); 
}); Router.route('/page2', function () { 
    loadContent('这是页面2'); 
});
 Router.route('/page3', function () {
    loadContent('这是页面3'); 
});