前端路由模式详解（hash和history）

前端路由模式详解（hash和history）
前端路由有两种模式：hash 模式和 history 模式，接下来分析这两种模式的实现方式和优缺点。

hash 模式
hash 模式是一种把前端路由的路径用井号 # 拼接在真实 URL 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。

示例：

我们新建一个 hash.html 文件，内容为：

<a href="#/a">A页面</a>
<a href="#/b">B页面</a>
<div id="app"></div>
<script>function render() {app.innerHTML = window.location.hash}window.addEventListener('hashchange', render)render()
</script>

然后打开 live-serve 查看效果。
在上面的例子中，我们利用 a 标签设置了两个路由导航，把 app 当做视图渲染容器，当切换路由的时候触发视图容器的更新，这其实就是大多数前端框架哈希路由的实现原理。
总结一下 hash 模式的优缺点：

优点：浏览器兼容性较好，连 IE8 都支持
缺点：路径在井号 # 的后面，比较丑

history 模式

history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求。

示例：

我们新建一个 history.html，内容为：

<a href="javascript:toA();">A页面</a>
<a href="javascript:toB();">B页面</a>
<div id="app"></div>
<script>function render() {app.innerHTML = window.location.pathname}function toA() {history.pushState({}, null, '/a')render()}function toB() {history.pushState({}, null, '/b')render()}window.addEventListener('popstate', render)
</script>

然后打开 live-serve查看效果。

history API 提供了丰富的函数供开发者调用，我们不妨把控制台打开，然后输入下面的语句来观察浏览器地址栏的变化：

history.replaceState({}, null, '/b') // 替换路由
history.pushState({}, null, '/a') // 路由压栈
history.back() // 返回
history.forward() // 前进
history.go(-2) // 后退2次

上面的代码监听了 popstate 事件，该事件能监听到：

用户点击浏览器的前进和后退操作
手动调用 history 的 back、forward 和 go 方法

监听不到：

history 的 pushState 和 replaceState方法

这也是为什么上面的 toA 和 toB 函数内部需要手动调用 render 方法的原因。

**在线上部署基于 history API 的单页面应用的时候，一定要后端配合支持才行，否则会出现大量的 404。**以最常用的 Nginx 为例，只需要在配置的 location / 中增加下面一行即可：

try_files $uri /index.html;

总结一下 history 模式的优缺点：

优点：路径比较正规，没有井号 #
缺点：兼容性不如 hash，且需要服务端支持，否则一刷新页面就404了

前端路由模式详解（hash和history）相关推荐

vue-router路由模式详解
一.路由模式解析要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置. 如果有进行过服务器开发或者对http协议有所了解就会知 ...
【前端路由】Vue-router 中hash模式和history模式的区别 a标签跳转
[前端路由]Vue-router 中hash模式和history模式的区别咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个 ...
window 程序报错自动重启_好程序员web前端教程之详解JavaScript严格模式
好程序员web前端教程之详解JavaScript严格模式,严格模式(Strict mode)是由ECMA-262规范定义的新兴JavaScript标准,发布于2009年12月第五版.旨在改善错误检查功 ...
js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...
25、react 中使用路由 router 详解
react 中使用路由 router 详解今天开始最新的一个模块,也是 react 开发中最重要的一部分,就是路由. SPA 理解我们使用原生的 HTML + CSS + JavaScript 开 ...
Linux系统多网卡绑定各配置模式详解
Linux系统多网卡绑定各配置模式详解 1. 配置多网卡bond 1.1. mode=0 模式 1.2. mode=1 模式 1.2.1. 关闭NetworkManager服务 1.2.2. 网卡配置 ...
Docker(十四)：Docker：网络模式详解
Docker作为目前最火的轻量级容器技术,牛逼的功能,如Docker的镜像管理,不足的地方网络方面. Docker自身的4种网络工作方式,和一些自定义网络模式安装Docker时,它会自动创建三个网络 ...
【Tools】VMware虚拟机三种网络模式详解和操作
00. 目录文章目录 00. 目录 01. VMware虚拟机三种网络模式 02. Bridged(桥接模式) 03. NAT(地址转换模式) 04. Host-Only(仅主机模式) 05. 参考 ...
查看此docker网络连接模式_Docker：网络模式详解
袖珍指南 Docker作为目前最火的轻量级容器技术,牛逼的功能,如Docker的镜像管理,不足的地方网络方面. Docker自身的4种网络工作方式,和一些自定义网络模式安装Docker时,它会自动创 ...

前端路由模式详解（hash和history）

前端路由模式详解（hash和history）相关推荐

最新文章

热门文章