前端路由Hash与History模式

时间 2019-11-08

原文原文链接

了解SPA

现代前端项目多为单页Web应用(SPA)，在单页Web应用中路由是其中的重要环节。
SPA 是 single page web application 的简称，译为单页Web应用。
简单的说 SPA 就是一个WEB项目只有一个 HTML 页面，一旦页面加载完成，SPA 不会由于用户的操做而进行页面的从新加载或跳转。取而代之的是利用 JS 动态的变换 HTML 的内容，从而来模拟多个视图间跳转。css

前度路由

简单的说，就是在保证只有一个 HTML 页面，且与用户交互时不刷新和跳转页面的同时，为 SPA 中的每一个视图展现形式匹配一个特殊的 url。在刷新、前进、后退和SEO时均经过这个特殊的 url 来实现。
咱们须要实现下满两点：html

改变 url 且不让浏览器像服务器发送请求。
能够监听到 url 的变化
能够在不刷新页面的前提下动态改变浏览器地址栏中的URL地址

hash 模式和 history 模式，就是用来实现上面功能的前端

Hash模式

在url后面加上#，如http://127.0.0.1:5500/前端路由/hash.html#/page1这个url后面的#/page1就是hash值html5

hash 值的变化不会致使浏览器像服务器发送请求
location.hash能够获取hash值
hashchange是hash值发生改变的调用的函数

基于以上三点咱们能够写一个路由实例web

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li><a href="#/">/</a></li>
      <li><a href="#/page1">page1</a></li>
      <li><a href="#/page2">page2</a></li>
    </ul>
    <div class="content-div"></div>
  </body>
  <script>
    class RouterClass {
      constructor() {
        this.routes = {}; // 记录路径标识符对应的cb
        this.currentUrl = ""; // 记录hash只为方便执行cb
        window.addEventListener("load", () => this.render());
        window.addEventListener("hashchange", () => this.render());
      }

      /* 初始化 */
      static init() {
        window.Router = new RouterClass();
      }

      /* 注册路由和回调 */
      route(path, cb) {
        this.routes[path] = cb || function() {};
      }

      /* 记录当前hash，执行cb */
      render() {
        this.currentUrl = window.location.hash.slice(1) || "/";
        this.routes[this.currentUrl]();
      }
    }


    RouterClass.init();
    const ContentDom = document.querySelector(".content-div");
    const changeContent = content => (ContentDom.innerHTML = content);

    Router.route("/", () => changeContent("默认页面"));
    Router.route("/page1", () => changeContent("page1页面"));
    Router.route("/page2", () => changeContent("page2页面"));
  </script>
</html>

History模式

History 接口容许操做浏览器的曾经在标签页或者框架里访问的会话历史记录。能够参考下两篇文章对history的说明
https://css-tricks.com/using-the-html5-history-api/
https://developer.mozilla.org/zh-CN/docs/Web/API/History
下面介绍在这个模式下须要用到的apiajax

history基本api

history.go(n)：路由跳转几步，n为2往前跳转2个页面，-2日后跳转两个页面
history.back()：路由后退，至关于 history.go(-1)，用户可点击浏览器左上角的后退按钮模拟此方法
history.forward()：路由前进，至关于 history.go(1)，用户可点击浏览器左上角的前进按钮模拟此方法

pushState()

history.pushState()：添加一条路由历史记录，若是设置跨域网址则报错segmentfault

history.pushState用于在浏览历史中添加历史记录,可是并不触发跳转,此方法接受三个参数，依次为：
state:一个与指定网址相关的状态对象， popstate事件触发时，该对象会传入回调函数。若是不须要这个对象，此处能够填 null。
title：新页面的标题，可是全部浏览器目前都忽略这个值，所以这里能够填 null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

window的popstate事件

当活动历史记录条目更改时，将触发popstate事件。若是被激活的历史记录条目是经过对history.pushState（）的调用建立的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。
须要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在作出浏览器动做时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）后端

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li><a href="/">/</a></li>
      <li><a href="/page1">page1</a></li>
      <li><a href="/page2">page2</a></li>
    </ul>
    <div class="content-div"></div>
  </body>
  <script>
    class RouterClass {
      constructor(path) {
        this.routes = {}; // 记录路径标识符对应的cb
        history.replaceState({ path }, null, path); // 进入状态
        this.routes[path] && this.routes[path]();
        window.addEventListener("popstate", e => {// 当用户点击浏览器的前进或者后退触发
            console.log(e.state)
          const path = e.state && e.state.path;
          this.routes[path] && this.routes[path]();
        });
      }
      
      /* 初始化 */
      static init() {
        window.Router = new RouterClass(location.pathname);
      }

      /* 注册路由和回调 */
      route(path, cb) {
        this.routes[path] = cb || function() {};
      }

      /* 跳转路由，并触发路由对应回调 */
      go(path) {
        
        history.pushState({ path }, null, path);
        console.log(history);
        this.routes[path] && this.routes[path]();
      }
    }

    RouterClass.init();
    const ul = document.querySelector("ul");
    const ContentDom = document.querySelector(".content-div");
    const changeContent = content => (ContentDom.innerHTML = content);

    Router.route("/", () => changeContent("默认页面"));
    Router.route("/page1", () => changeContent("page1页面"));
    Router.route("/page2", () => changeContent("page2页面"));

    ul.addEventListener("click", e => {
      console.log(e.target.tagName);
      if (e.target.tagName === "A") {
        e.preventDefault();
        Router.go(e.target.getAttribute("href"));
      }
    });
  </script>
</html>

Hash 模式和 History 模式对比

Hash 模式是使用 URL 的 Hash 来模拟一个完整的 URL，所以当 URL 改变的时候页面并不会重载。History 模式则会直接改变 URL，因此在路由跳转的时候会丢失一些地址信息，在刷新或直接访问路由地址的时候会匹配不到静态资源。所以须要在服务器上配置一些信息，让服务器增长一个覆盖全部状况的候选资源，好比跳转 index.html 什么的api

hash路由优缺点

优势跨域
- 实现简单，兼容性好（兼容到ie8）
- 绝大多数前端框架均提供了给予hash的路由实现
- 不须要服务器端进行任何设置和开发
- 除了资源加载和ajax请求之外，不会发起其余请求
缺点
- 对于部分须要重定向的操做，后端没法获取hash部份内容，致使后台没法取得url中的数据，典型的例子就是微信公众号的oauth验证
- 服务器端没法准确跟踪前端路由信息
- 对于须要锚点功能的需求会与目前路由机制冲突

History(browser)路由优缺点

优势
- 对于重定向过程当中不会丢失url中的参数。后端能够拿到这部分数据
- 绝大多数前段框架均提供了browser的路由实现
- 后端能够准确跟踪路由信息
- 能够使用history.state来获取当前url对应的状态信息
缺点
- 兼容性不如hash路由(只兼容到IE10)
- 须要后端支持，每次返回html文档

参考文章

实例来源：http://www.javashuo.com/article/p-ybhejxib-r.html
官方文档：https://developer.mozilla.org/en-US/docs/Web/API/History_API
优缺点比较:https://juejin.im/post/5b5ec5...