路由

我理解的路由，有一個url是xxx.com，訪問

xxx.com
xxx.com/a
xxx.com/b

會對應(yīng)有不同的界面。也就是根據(jù)不同的路徑，我們得到了不同的結(jié)果。后端的web服務(wù)器如何實現(xiàn)這樣的跳轉(zhuǎn)，收到瀏覽器發(fā)出的響應(yīng)后，對于不同的路徑，web服務(wù)器返回不同的html等信息給瀏覽器。這就是路由的作用。

前端路由

前端路由，就是訪問不同路徑，由瀏覽器中的js根據(jù)/后不同的路徑來控制頁面的跳轉(zhuǎn)，得到了不同的頁面。這個過程由前端控制，不需后端web服務(wù)器處理。常見的實現(xiàn)比如Vue-router。開發(fā)單頁面應(yīng)用時，就會用到路由功能。

前端路由實現(xiàn)的原理

訪問xxx.com/a， xxx.com/b時，正常狀態(tài)下，頁面會進(jìn)行刷新，狀態(tài)會發(fā)生改變。實現(xiàn)前端控制路由，有下面這些方法。

通過錨點

把xxx.com/a， xxx.com/b改為xxx.com/#a， xxx.com/#b，瀏覽器處理時，URL后的錨點信息是不會傳給服務(wù)器的，因此后端不會有處理。
通過onhashchange API能監(jiān)聽URL的錨點變化，錨點變化時，通過js控制跳轉(zhuǎn)到指定的頁面。

通過window.history

history.pushState(state, title, url)
將當(dāng)前URL和history.state加入到history中，并用新的state和URL替換當(dāng)前。不會造成頁面刷新。也就是實現(xiàn)了訪問xxx.com/a， xxx.com/b時，請求傳給后端web服務(wù)器，但是并不刷新當(dāng)前頁面。后端的web服務(wù)器收到請求后，都返回了同樣的結(jié)果，瀏覽器得到同一個html。

代碼實現(xiàn)

Vue-router的例子

• 最基本的例子，https://jsfiddle.net/yyx990803/xgrjzsup/，這里的原理是通過hash錨點來實現(xiàn)。
• vue-router也支持使用history方式實現(xiàn)，文檔里可以看（這種方式要對后端web服務(wù)器進(jìn)行配置，確保不同路徑請求返回相同頁面，否則會404）

原生JS實現(xiàn)

直接控制display實現(xiàn)

http://js.jirengu.com/gohitupawu/1/

通過錨點

<style>
    .content>div{
        display: none;
    }
    .content>div.active{
        display: block;
    }
    ol>li.active{
        color: red;
    }
</style>

  <tab>
    <ol class="nav">
      <li><a href="#1">goToA</a></li>
      <li><a href="#2">goToB</a></li>
    </ol>
    
    <ol class="content">
      <div>this is A</div>
      <div>this is B</div>
    </ol>
  </tab>

<script>
    selectTab()
    window.onhashchange = function(){
        selectTab()
    }
    function selectTab(){
        let n = location.hash.substring(1)
        let index = n - 1
        $('ol.content>div').eq(index)
              .addClass('active')
              .siblings()
              .removeClass('active')    
    }
</script>

上述方式即是通過錨點，監(jiān)聽hash變化實現(xiàn)的前端路由。

history方式

代碼略