Vue history 和 Hash两种不同mode的实现原理、区别、优缺点讲解

两种风格的实现原理

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

    
    


    
 
        
turn white
 
        
turn blue
 
        
turn green
 
    
 

2. 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);
  }
}

以下是使用方法：

  
hash1
  
hash2
  
hash3

前进 后退

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));