前端路由實現原理

zhangsisi發表於2018-03-02
前端路由

1.url的錨部分

url的錨部分（即從#開始的部分），用window.location.hash來讀寫，#是用來指導瀏覽器動作的，#後面的字串，都會被瀏覽器解析為位置識別符號，#對伺服器端完全無用（即不去瀏覽器下載檔案，不觸發瀏覽器過載），但會改變瀏覽器的訪問歷史

 <div style="height:1500px">
    <div style="margin-bottom:50px">
      <a href="#id1">id跳轉</a>
      <div id="id1" style="height:20px;background-color:#e8afaf">id跳轉</div>
    </div>

    <div>
      <a href="#print">錨點跳轉</a>
      <br>
      <a name="print" style="height:20px;background-color:#9a9ad6">錨點跳轉</a>
    </div>
  </div>複製程式碼

2.前端路由

前端路由是直接找到與地址匹配的物件或者元件並將其渲染出來，改變瀏覽器地址不傳送請求的方式有兩種：

1.加入#進行頁內導航

2.使用window.history模擬完整的url


相關文章