你必須知道的路由原理

時間 2019-11-08

原文原文鏈接

`hash`路由

利用hash實現路由切換javascript

<html lang="en">
<head>
  <style> #root{ height: 200px; border: 1px solid red; } </style>
</head>
<body>
  <a href="#/a">跳轉到/a</a>
  <a href="#/b">跳轉到/b</a>
  <div id="root"></div>
  <script> let container = document.getElementById('root'); window.addEventListener('hashchange',function (e) { console.log(e); container.innerHTML = `當前的路徑是${window.location.hash.slice(1)}`; }) </script>
</body>
</html>
複製代碼

當經過hash切換路由的時候回觸發hashchange事件
經過window.location.hash能夠拿到當前頁面的hash值

`Browser`路由

利用H5——API實現路由切換css

`history`對象

提供了操做瀏覽器會話歷史的接口html

【1】back跳到上一個路徑，做用同瀏覽器的回退按鈕
【2】forward跳到下一個路徑，做用同瀏覽器的前進按鈕
【3】go跳到某個路徑
- 【3-1】參數相對於當前路徑的隊列數字，例如go(1) === forword() ,go(-1) === back();
【4】length表示當前路徑隊列中存儲的路徑個數
【5】pushState在當前路徑隊列中增長新的路徑，而且跳轉到新路徑；length + 1
- 【5-1】參數三個history.pushState({name:'新的狀態'},'新的標題(已經廢棄)','/新的路徑')
【6】replaceState在當前的路徑隊列中用新的替換當前路徑；length不變
- 【6-2】參數同pushState

原理

<html lang="en">
<head>
  <style> #root { height: 200px; border: 1px solid red; } </style>
</head>
<body>
  <button onclick="push('/a')">/a</button>
  <button onclick="push('/b')">/b</button>
  <button onclick="push('/c')">/c</button>
  <div id="root"></div>
  <script> let container = document.getElementById('root'); /** * 監聽彈出狀態的事件(出棧操做) */ window.onpopstate = function (e) { console.log(e); container.innerHTML = e.state.to; } function push(to) { /** * pushState (入棧操做) * 三個參數 1.新的狀態對象 2.標題(已經廢棄) 3.跳轉到的路徑 */ window.history.pushState({ to }, null, to); } </script>
</body>
</html>
複製代碼

由上圖能夠看出當點擊路由按鈕的時候實現了路徑的切換
點擊瀏覽器的回退或者前進的時候實現了路徑的切換和視圖的切換(即觸發了window.onpopstate)
可是咱們想要的效果應該是點擊路由切換按鈕的時候也進行視圖的切換，文章前的你確定跟我有同樣的想法——綁定window.onpushstate事件，可是很遺憾，瀏覽器並無給咱們提供這個事件。

優化`pushState` && 實現`onpushstate`方法——實現點擊路由切換按鈕同時進行視圖切換

let oldPushState = window.history.pushState; // 保存原有的pushState方法;
window.history.pushState = function(state,title,url){
    onpushstate(state,title,url); // 調用咱們手寫的onpushstate切換視圖
    oldPushState.call(window.history,state,title,url); // 調用原有的pushState方法實現路由切換
}
window.onpushstate = function(state,title,url){
    container.innerHTML = state.to || url;
}
複製代碼