前端路由之 Hash 路由原生實現

Hash 路由的實現

使用過框架路由的人確定都有注意到url中的#號，爲何hash路由頁面不會跳轉——還記得a連接的錨點是怎麼實現的嗎。

• 多個路由集中處理
• 匹配對應路由
• 利用回調處理相應的邏輯

代碼(詳細的註釋)

<ul>
    <li><a href="#/">index</a></li>
    <li><a href="#/item">item</a></li>
    <li><a href="#/list">list</a></li>
  </ul>
  <br>
  <br>
  <div>頭部</div>
  <h1 class='result'></h1>


    function Router() {
       // 路由儲存
       this.routes = {};
       // 當前路由
       this.currentUrl = '';
    }
    Router.prototype = {
      // 路由處理
      route: function (path, callback) {
        this.routes[path] = callback || function(){};
      },
       // 頁面刷新
      refresh: function () {
        // 當前的hash值
        this.currentUrl = location.hash.slice(1) || '/';
        // 執行hash值改變後相對應的回調函數
        this.routes[this.currentUrl]();
      },
      // 頁面初始化
      init: function () {
        // 頁面加載事件
        window.addEventListener('load', this.refresh.bind(this), false);
        // hash 值改變事件
        window.addEventListener('hashchange', this.refresh.bind(this), false);
      }
    }
   
    // 全局掛載
    window.Router = new Router();
    // 初始化
    window.Router.init();

    let obj = document.querySelector('.result');
    
    function changeConent (cnt) {
      obj.innerHTML = cnt
    }

    // 匹配路由作相應的操做
    Router.route('/', () => {
      changeConent("當前是首頁");
    })

    Router.route('/item', () => {
      changeConent('當前是item頁面');
    })

    Router.route('/list', () => {
      // ajax 的數據就能夠這樣去拼接
      setTimeout(() => {
        obj.innerHTML = '<h1 style="color: red">Hello World</h1>'
      }, 1000)
    })