聊聊hash和history路由

yanshi
349 阅读5分钟

引言

目前（PC、H5）web开发模式大部分是前后端分离，开发的都是SPA，何为SPA，全称是：Single Page Application，即大家所说的单页面应用。但页面应用的特点是，只有一个HTML，要实现的交互、操作都在里面。相比之前的web应用，一个菜单下有几个子菜单，一个菜单对应一个HTML文件，在A.html菜单跳转到B.html中需要将B.html的位置进行指定，以读取目前文件内容，在完成跳转之后浏览器内部就记录这一次的变化，如果此时点击浏览器的返回，则可以回到上一个页面，在跳转产生的浏览器地址栏的变化，会记录在浏览器对应模块中。而SPA应用在路由变化的时候也同样。

何为前端路由

描述 url 和 UI（页面）之间的映射关系，我们称之为前端路由，属于单向映射, url 改变时导致UI 改变（渲染不同的html内容）。

开篇

hash和history路由在前端有着句足轻重的地位，那hash和history之间有啥区别，一起来see一see。

前端路由

Hash模式

定义

它通过 URL 中的哈希（#）来表示不同的页面或视图，而不是传统的实际页面路径。在使用 Hash 路由时，页面切换和视图展示是通过 JavaScript 动态更新的，不需要重新加载整个页面，从而实现单页应用的效果。

工作原理

  • URL 格式：URL 中以 # 符号为分隔符，# 后面的部分称为哈希（hash），如：example.com/#/home。，当 # 符后面的内容发生变化时，会触发onhashchange事件

      window.onhashchange = function() {
      // 在这里执行你需要的处理代码

  };

  • 监听 URL 变化：前端通过 JavaScript 监听浏览器的 hashchange 事件或定时检查 URL 的哈希部分是否发生变化。

  • 路由处理：当 URL 哈希发生变化时，前端根据哈希值来确定要显示的页面或视图，并通过 DOM 操作或渲染引擎将相应的内容展示在页面上。

  • 跳转和导航：前端通过修改 URL 的哈希部分来实现页面之间的跳转和导航，而不需要发送新的请求到服务器。

特点

使用 Hash 路由的优势：简单易实现，不需要服务端配置，同时兼容性较好，因为 Hash 路由并不会触发浏览器向服务器发送新的请求。然而，Hash 路由的 URL 看起来不太美观，有时会带来 SEO 的问题，因为搜索引擎通常不会解析哈希部分。

History 模式

定义

history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求， 这样的 URL 改变可以通过 pushState() 和 replaceState() 方法来实现，这些改变不会触发浏览器向服务器发送请求，但可以> 更新当前页面的内容 路径中不带有 # 例如：example.com/home 同时，该模式的实现需要后端支持，因为在 History 模式下，URL 是真实的路径，所以当用户直接访问或刷新这些 URL 时，服务器需要正确地响应相应的页面，而不是返回 404 错误。

API

在浏览器console打印

history.png

history.pushState(data, title [, url])

pushState 主要用于往历史记录堆栈顶部添加一条记录。

参数：

  • data：会在 onpopstate 事件触发时作为参数传递过去。添加进去的state刷新后不会消失

  • title：页面标题，当前所有浏览器都会忽略此参数。

  • url：页面地址，可选，缺少时表示为当前页地址。

手动添加state： 这里在state添加了，whoami这样一个属性 image.png popstate.png

history.replaceState(data, title [, url])

replaceState 用于更改当前的历史记录，参数同上。

上述的 pushState 是添加历史记录，而这个 replaceState 用于替换当前历史记录。replaceState调用完成之后页面正常跳转，在跳转的目前页面点击浏览器的返回上一级，返回的是

history.state

history.state 用于存储以上方法的 data 数据。不同浏览器的读写权限不一样。

window.onpopstate

window.onpopstate 用于响应 pushState 或 replaceState 的调用。当用户点击浏览器的前进或后退按钮时，会触发 popstate 事件，从而执行相应的处理函数。

代码：

window.onpopstate = (e) => {
    // 
    console.log('onpopstate', e);
  };

得到的结果:

pushState.png

特点

  • 1、没有hash的 # 符号，路径看着优美直观
  • 2、通过history.state，获取对应的state信息
  • 3、通过 pushState() 和 replaceState() 方法，路由变化不会刷新页面

一些属性

属性含义如下：

  • location.protocol：表示当前页面使用的协议，例如："http:", "https:", "file:"等。
  • location.hostname：表示当前页面的主机名。
  • location.host：表示当前页面的主机名和端口号，格式为"hostname:port"。
  • location.port：表示当前页面的端口号。
  • location.pathname：表示当前页面的访问路径。
  • location.search：表示当前页面的搜索内容，通常用于GET请求中的查询参数。
  • location.hash：表示当前页面的哈希值，通常用于标识页面中的某个位置。

总结

  • hash和history都是用在SPA中，在SPA中根据路径的不同会展示不同的页面，在路径变化的时候都不会重新请求、刷新页面（不是直接在浏览器的地址栏里修改路径，按下enter，通过调用API方式，改变路径）
  • hash直观特点就是 在路径中带有 # 符号，# 符号后面的hash散列值，当这些值变化的时候会触发 onhashchange事件，参数是对应的内容
  • history，是 HTML5 中的api,可以通过 history.state来获取信息
  • history 模式下在nginx里一般都要配置：tri_file 指定页面文件
avatar
文章
阅读
粉丝