hash和history模式实现原理

最新推荐文章于 2024-04-05 00:00:00 发布

DarkerSU

最新推荐文章于 2024-04-05 00:00:00 发布

阅读量278

点赞数

分类专栏： vue JS 文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/DarkerSP/article/details/129059162

版权

JS 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

两种风格的实现原理

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

<!DOCTYPE html>
<html lang="en">
<head>
    <metacharset="UTF-8">
    <title>router</title>
</head>
<body>
<ul>
    <li><ahref="#/">turn white</a></li>
    <li><ahref="#/blue">turn blue</a></li>
    <li><ahref="#/green">turn green</a></li>
</ul>
<script>
functionRouter() {
        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 = newRouter();
    window.Router.init();

    var content = document.querySelector('body');
    // change Page anythingfunctionchangeBgColor(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><ahref="/">hash1</a></li>
    <li><ahref="/hash2">hash2</a></li>
    <li><ahref="/hash3">hash3</a></li>
</ul>
<div>
    <buttonclass="f">前进</button>
    <buttonclass="b">后退</button>
</div>
const color = {
  "/": "yellow",
  "/hash2": "#333",
  "/hash3": "#DDD"
};
const route = newRouter();
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 } = newURL(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));

hash、history两种风格的区别

hash	history
url带有#号	url中没有#号
兼容ie8	兼容ie10
只改变loaction.hash值，即#号后端的值不改变url，不需要服务器做任何处理	改变url主体部分，适合单页面应用（vue,angular,react），否则每次修改url都需要服务器端根据配置返回对应的html到浏览器
刷新不会出现404	非单页面应用，直接访问嵌套路由会报404需要在服务器端做好对应路由的回调配置，而单页面应用如vue,如果访问的url，无法被本地路由配置所匹配则会报错，然后跳入本地配置的404页面

优缺点

hash 模式:
优点：兼容ie8,只改变hash值来触发hashchange，不需要服务端做任何处理;
缺点：hash模式中的#号也称作锚点，这里的的 # 和 css 中的 # 是一个意思，所以在 hash 模式内，页面定位会失效;hash 不利于 SEO（搜索引擎优化）;白屏时间问题。浏览器需要等待 JavaScript 文件加载完成之后渲染 HTML 文档内容，用户等待时间稍长。