路由的hash和history模式的区别

目录

✅ 路由模式概述

一. 路由的hash和history模式的区别

1. hash模式

2. history模式

3. 两种模式对比

二. 如何获取页面的hash变化


✅ 路由模式概述

单页应用是在移动互联时代诞生的,它的目标是不刷新整体页面,通过地址栏中的变化来决定内容区域显示什么内容。

要达成这个目标,我们要用到前端路由技术,具体来说有两种方式来实现:hash模式和history模式。hash模式是通过监听hashChange事件来实现的,history模式是通过pushState方法+popstate事件来实现的。 

一. 路由的hash和history模式的区别

Vue-Router有两种模式:hash模式和history模式。默认的路由模式是hash模式。

1. hash模式

◼️ 简介

hash模式(又称哈希路由)是开发中默认的模式,它的URL带着一个#,例如:http://www.abc.com/#/vue,它的hash值就是#/vue

◼️ 特点

hash值会出现在URL里面,但是不会出现在HTTP请求中,对后端完全没有影响,所以改变hash值,不会重新加载页面。这种模式的浏览器支持度很好,低版本的IE浏览器也支持这种模式。 hash路由被称为是前端路由,已经成为SPA(单页面应用)的标配。

◼️ 原理

hash模式的主要原理就是onhashchange()事件:

window.onhashchange = function(event){console.log(event.oldURL, event.newURL);let hash = location.hash.slice(1);
}

使用onhashchange()事件的好处就是,在页面的hash值发生变化时,无需向后端发起请求,window就可以监听事件的改变,并按规则加载相应的代码。 除此之外,hash值变化对应的URL都会被浏览器记录下来,这样浏览器就能实现页面的前进和后退。虽然是没有请求后端服务器,但是页面的hash值和对应的URL关联起来了。

hash模式是一种把前端路由的路径用 # 拼接在真实URL后面的模式。形式上,hash模式url里面永远带着#号,开发当中默认使用这个模式

原理是通过location.hash属性设置#后面的路径发生变化,并且浏览器并不会重新发起请求

只要hash地址发生改变,则会触发hashchange事件,我们在事件中设置地址对应的视图展示
 

hash模式的浏览器兼容性较好,就是看起来不够优雅。如果用户考虑url的规范,那么就需要使用history模式,因为history模式没有#号,是个正常的url,适合推广宣传;

2. history模式

◼️ 简介

history模式(又称历史路由)的URL中没有#,它使用的是传统的路由分发模式,即用户在输入一个URL时,服务器会接收这个请求,并解析这个URL,然后做出相应的逻辑处理。

◼️ 特点

当使用history模式时,URL就像这样:http://abc.com/user/id。相比hash模式更加好看。但是,history模式需要后台配置支持。如果后台没有正确配置,访问时会返回404。

history模式开发的SPA项目,需要服务器端做额外的配置,否则会出现刷新白屏(链接分享失效)。原因是页面刷新时,浏览器会向服务器真的发出对这个地址的请求,而这个文件资源又不存在,所以就报404。处理方式就由后端做一个保底映射:所有的请求全部拦截到index.html上。

◼️ API

history api可以分为两大部分,切换历史状态和修改历史状态:

修改历史状态:包括了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法,这两个方法应用于浏览器的历史记录栈,提供了对历史记录进行修改的功能。只是当他们进行修改时,虽然修改了url,但浏览器不会立即向后端发送请求。如果要做到改变url但又不刷新页面的效果,就需要前端用上这两个API。

切换历史状态: 包括forward()、back()、go()三个方法,对应浏览器的前进,后退,跳转操作。
虽然history模式丢弃了丑陋的#。但是,它也有自己的缺点,就是在刷新页面的时候,如果没有相应的路由或资源,就会刷出404来。 如果想要切换到history模式,就要进行以下配置(后端也要进行配置):

const router = new VueRouter({mode: 'history',routes: [...]
})

history模式用到了HTML5中的history API,允许开发者直接更新浏览器URL地址而不重新发起请求。

用到了history API:replaceState、pushState、back、forward和go这个5个方法。

但是历史记录改变以后,视图并不会更新,我们需要在地址改变(包括使用onpopstate事件监听历史记录的回退)后,重新设置视图

history兼容性不如hash模式,而且浏览器在刷新的时候会按照路径发送真实的资源请求,因此在线上部署基于historyAPI的单页面应用的时候,一定要后端配合支持才行(如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面) 

✅ 小 结:

👉🏻 两者原理不同

hash模式的实现原理是通过监听hashChange事件来实现的。

history模式是通过调用history.pushState方法(或者replaceState) 并且监听popstate事件来实现的。history.pushState会追加历史记录,并更换地址栏地址信息,但是页面不会刷新,需要手动调用地址变化之后的处理函数,并在处理函数内部决定跳转逻辑;监听popstate事件是为了响应浏览器的前进后退功能。

👉🏻 两者表现不同

hash模式会在地址栏中有#号,而history模式没有;同时由于history模式的实现原理用到H5的新特性,所以它对浏览器的兼容性有要求(IE >= 10)。 

3. 两种模式对比

调用 history.pushState() 相比于直接修改 hash,存在以下优势:

  • pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;而 hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL;
  • pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中;
  • pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中;而 hash 只可添加短字符串;
  • pushState() 可额外设置 title 属性供后续使用。
  • hash模式下,仅hash符号之前的url会被包含在请求中,后端如果没有做到对路由的全覆盖,也不会返回404错误;history模式下,前端的url必须和实际向后端发起请求的url一致,如果没有对用的路由处理,将返回404错误。

hash模式和history模式都有各自的优势和缺陷,我们还是要根据实际情况选择性的使用。

二. 如何获取页面的hash变化

(1)监听$route的变化

// 监听,当路由发生变化的时候执行
watch: {$route: {handler: function(val, oldVal){console.log(val);},// 深度观察监听deep: true}
},

(2)window.location.hash读取#值 window.location.hash 的值可读可写,读取来判断状态是否改变,写入时可以在不重载网页的前提下,添加一条历史访问记录。

参考资料:vue路由和vue3总结

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/22587.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL 表别名 和 列别名

列表名 列表名之后 order by 可以用别名 也可以用原名, where 中不能用别名的 SQL语句执行顺序: from–>where–>group by -->having — >select --> order 第一步:from语句,选择要操作的表。 第二步&#xff1…

SpringBoot图片上传并对大小进行压缩(缩放比例)

前言 最近有个新需求,项目中对客户上传jpg图片的时候,每次都是校验大小必须≤30KB,但是客户实际使用的时候,总是会自己去进行压缩,压缩到30KB以内之后再上传,使用时间长了之后,客户总会觉得很麻…

react学习笔记——1. hello react

包含的包一共有4个,分别的作用如下: babel.min.js:可以进行ES6到ES5的语法转换;可以用于import;可以用于将jsx转换为js。注意,在开发的时候,这个转换(jsx转换js)不在线上…

Tcp的粘包和半包问题及解决方案

目录 粘包: 半包: 应用进程如何解读字节流?如何解决粘包和半包问题? ①:固定长度 ②:分隔符 ③:固定长度字段存储内容的长度信息 粘包: 一次接收到多个消息,粘包 应…

HBase概述

HBase 一 HBase简介与环境部署 1.1 HBase简介&在Hadoop生态中的地位 1.1.1 什么是HBase HBase是一个分布式的、面向列的开源数据库HBase是Google BigTable的开源实现HBase不同于一般的关系数据库, 适合非结构化数据存储 1.1.2 BigTable BigTable是Google设计的分布式…

mysql的update_time

CREATE TABLE users (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(50) NOT NULL,age INT,update_time TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间 );具体解释如下: DEFAULT CURRENT_TIMESTAMP: 这部分表示当插入…

【CI/CD】图解六种分支管理模型

图解六种分支管理模型 任何一家公司乃至于一个小组织,只要有写代码的地方,就有代码版本管理的主场,初入职场,总会遇到第一个拦路虎 git 管理流程,但是每一个企业似乎都有自己的 git 管理流程,倘若我们能掌握…

如何在不使用脚本和插件的情况下手动删除 3Ds Max 中的病毒?

如何加快3D项目的渲染速度? 3D项目渲染慢、渲染卡顿、渲染崩溃,本地硬件配置不够,想要加速渲染,在不增加额外的硬件成本投入的情况下,最好的解决方式是使用渲云云渲染,在云端批量渲染,批量出结…

ABAP 自定义搜索功能 demo1

ABAP 自定义搜索功能 demo1 效果: 双击选中行则为选中对应发票 实现 1定义 定义屏幕筛选参数 SELECTION-SCREEN BEGIN OF SCREEN 9020. SELECT-OPTIONS:s1_belnr FOR rbkp-belnr, s1_gjahr FOR rbkp-gjahr, s1_lifnr FOR rbkp-lifnr, s1_erfna FOR rbkp-erfnam, …

go入门实践二-tcp服务端

文章目录 前言接口与方法并发-协程项目管理bufio包使用其他代码 前言 上一篇,我们通过go语言的hello-world入门,搭建了go的编程环境,并对go语法有了简单的了解。本文实现一个go的tcp服务端。借用这个示例,展示接口、协程、bufio的…

php运算符的短路特性

php运算符的短路特性 1、逻辑运算符:逻辑与(&&)和逻辑或(||),存在着短路特性 PHP中有以下两个运算符具有短路的特性,他们是逻辑运算符的逻辑与(&&)和逻辑或(||&am…

线程概念linux

何为线程: 线程是程序中负责执行的单位,它可以被看作是进程的一部分,是进程的子任务。线程与进程的区别在于,进程是一个资源单位,而线程是进程的一部分,它只有栈这个独立的资源,其他资源如代码…

Java SpringBoot集成Activiti7工作流

Activiti7 Java SpringBoot集成Activiti7工作流介绍项目集成引入依赖YML配置文件配置类 启动项目生成表结构Activiti的数据库支持 Activiti数据表介绍项目Demo地址: Java SpringBoot集成Activiti7工作流 本文项目Demo地址附在文章后方 官网主页:http://a…

Vue npm 128

npm #降低版本 npm install npm3.8.6 -g升级到最新版本 npm install -g npmvue用npm 安装指定element-ui 版本 npm i element-ui2.0.10查看当前镜像源 npm config get registry切换镜像 npm config set registry https://registry.npmmirror.com --registryhttps://registry.n…

C++ 万能引用实现完美转发示例

万能引用 万能引用的一种常见使用场景是用在模板函数中&#xff1a; template<class T> void fun(T&& t) { //... }函数参数t就是一个万能引用&#xff0c;万能引用在这里的作用&#xff0c;简单来说就是它既能够接收左值也能接受右值 验证函数 定义一个参数…

组件化、跨平台…未来前端框架将如何演进?

前端框架在过去几年间取得了显著的进步和演进。前端框架也将继续不断地演化&#xff0c;以满足日益复杂的业务需求和用户体验要求。从全球web发展角度看&#xff0c;框架竞争已经从第一阶段的前端框架之争&#xff08;比如Vue、React、Angular等&#xff09;&#xff0c;过渡到…

powerdesigner各种字体设置;preview字体设置;sql字体设置

1.设置左侧菜单&#xff1a; 步骤如下&#xff1a; tools —> general options —> fonts —> defalut UI font ,选择字体样式及大小即可&#xff0c;同下图。 2.设置preview字体大小&#xff08;sql预览&#xff09; 步骤如下&#xff1a; tools —> general o…

c语言实现简单的tcp服务端

功能&#xff1a;监听本地8888端口&#xff0c;接收到客户端连接请求后创建线程单独处理与客户端的交互&#xff0c;支持同时与多个客户端交互。 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <sys/…

Mac隐藏和显示文件

由于之前没有使用过Mac本&#xff0c;所以很多地方都不太清楚&#xff0c;在下载git项目的时候&#xff0c;发现没有.git文件&#xff0c; 一开始还以为下载错了&#xff0c;但是git命令是可以看到远端分支以及当前分支的&#xff0c;之后在一次解压文件的时候发现&#xff0c;…

【音频分离】demucs V3的环境搭建及训练(window)

文章目录 一、环境搭建&#xff08;1&#xff09;新建虚拟环境&#xff0c;并进入&#xff08;2&#xff09;安装pyTorch&#xff08;3&#xff09;进入代码文件夹&#xff0c;批量安装包&#xff08;4&#xff09;安装其他需要的包 二、数据集准备&#xff08;1&#xff09;下…