用 js 實現路由功能

一、hash

url 地址中的 hash 是哪些部分呢？

井號和井號后面的內容就是hash部分。

舉個例子：https://cn.vuejs.org/#/v2

這里，#/v2就是 hash 部分。（利用 location.hash 就可以訪問到它。）

二、模擬路由功能

HTML：

<ul>
  <li><a href="#/aaa">AAA</a></li>
  <li><a href="#/bbb">BBB</a></li>
  <li><a href="#/ccc">CCC</a></li>
</ul>
<div id="container"></div>

(1) 初始狀態

(2) 當點擊a鏈接時，就會跳轉到對應的路由地址。

例如點擊 AAA

三、顯示路由頁面

思路：當跳轉到路由地址時，顯示對應的路由頁面。實際上就是判斷 location.hash 是哪個，然后根據這個值來給頁面添加內容。

JS:

let div = document.getElementById('container');

window.onhashchange = function () {
  let hash = location.hash;
  hash = hash.replace('#', '');
  switch (hash) {
    case '/aaa':
      div.innerHTML = "AAAAAA"
      break;
    case '/bbb':
      div.innerHTML = "BBBBBB"
      break;
    case '/ccc':
      div.innerHTML = "CCCCCC"
      break;
  }
  // console.log(hash);
}

注意：查看當前 hash：location.hash，hash 值變化時觸發事件：window.onhashchange = func

效果展示

(1) 初始狀態

(2) 點擊 AAA

(3) 點擊 BBB

(4) 點擊 CCC

四、總結

(1) 查看當前路徑 hash 值：location.hash
(2) hash 值變化時，觸發事件函數：window.onhashchange = func