关于前端:Vue-history-和-Hash两种不同mode的实现原理区别优缺点讲解

51次阅读

共计 2940 个字符，预计需要花费 8 分钟才能阅读完成。

hash 模式：通过扭转 location.hash(注：只扭转 url 的 hash 值而不是 url 的主体局部，顾不会刷新页面、不会发送 http 申请)，而后由浏览器监听事件 onhashchange 事件来监听 hash 值的变动并触发绑定的回调函数，从而来展现不同的页面内容。
以下是一个简略的 hash 路由的实列代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router</title>
</head>
<body>
    <ul> 
        <li><a href="#/">turn white</a></li> 
        <li><a href="#/blue">turn blue</a></li> 
        <li><a href="#/green">turn green</a></li> 
    </ul> 
<script>
    function Router() {this.routes = {};
        this.currentUrl = '';
    }
    Router.prototype.route = function(path, callback) {this.routes[path] = callback || function(){};
    };
    Router.prototype.refresh = function() {this.currentUrl = location.hash.slice(1) || '/';
        this.routes[this.currentUrl]();};
    Router.prototype.init = function() {window.addEventListener('load', this.refresh.bind(this), false);
        window.addEventListener('hashchange', this.refresh.bind(this), false);
    }
    window.Router = new Router();
    window.Router.init();

    var content = document.querySelector('body');
    // change Page anything
    function changeBgColor(color) {content.style.backgroundColor = color;}

    Router.route('/', function() {changeBgColor('white');
    });
    Router.route('/blue', function() {changeBgColor('blue');
    });
    Router.route('/green', function() {changeBgColor('green');
    });
</script>
</body>
</html>

HTML5 history 模式：通过 history interface 新增的 pushState、replaceState 办法以及现有的 go、back、forward 办法来扭转 url（注：能够扭转 url 的主体局部, 顾在间接拜访嵌套路由时，必须配有该门路所对应的资源否则会呈现 404 的状况，但能够通过 vue 的 redirect 重定向到 index 页面或者 404 页面，来解决此问题）, 而后通过 window.popState 事件来监听 url 变动并执行对应的回调函数，从而来展现不同的页面内容。
以下是一个简略的 history 路由的实列代码：

class Router {constructor() {this.routes = new Map();
    this.init();}
  change(e) {
    // 避免为 null
    const {path} = e.state || {};
    this.implement(path);
  }
  init() {window.addEventListener("popstate", this.change.bind(this));
    window.addEventListener("load", () => {const { pathname} = location;
      history.replaceState({path: pathname}, "", pathname);
      this.implement(pathname);
    });
  }
  implement(path) {if (!this.routes.has(path)) {return;}
    const fn = this.routes.get(path);
    typeof fn == "function" && fn.call(this, path);
  }
  go(num) {history.go(num);
  }
  route(state, fn) {this.routes.set(state, fn);
  }
  push(state) {history.pushState({ path: state}, "", state);
    this.implement(state);
  }
  replace(state) {history.replaceState({ path: state}, "", state);
    this.implement(state);
  }
}

以下是应用办法：

<ul>
  <li><a href="/">hash1</a></li>
  <li><a href="/hash2">hash2</a></li>
  <li><a href="/hash3">hash3</a></li>
</ul>
<div><button class="f"> 后退 </button> <button class="b"> 后退 </button></div>

const color = {
  "/": "yellow",
  "/hash2": "#333",
  "/hash3": "#DDD"
};
const route = new Router();
route.route("/", function(e) {document.body.style.background = color[e];
});
route.route("/hash2", function(e) {document.body.style.background = color[e];
});
route.route("/hash3", function(e) {document.body.style.background = color[e];
});
Array.from(document.links).forEach(fn => {
  fn.addEventListener("click", e => {e.preventDefault();
    const href = fn.href;
    const {pathname} = new URL(href);
    route.push(pathname);
  });
});
const backOff = document.querySelector(".b");
const forward = document.querySelector(".f");
backOff.addEventListener("click", () => route.go(-1));
forward.addEventListener("click", () => route.go(1));

正文完