路由的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.rhkb.cn/news/77579.html

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

相关文章

微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)

问题描述 今天第一次接触vant组件库。 ant官网地址适用于Vue3 支持Vue2、Vue3、微信小程序等 我在使用van-tabs组件时遇到了一个问题,如下图所示: 从图片上可以看到有个灰色的横向滚动条,一开始领导给我说这个问题,我反反复复都…

【云原生】使用kubeadm搭建K8S

目录 一、Kubeadm搭建K8S1.1环境准备1.2所有节点安装docker1.3所有节点安装kubeadm,kubelet和kubectl1.4部署K8S集群1.5所有节点部署网络插件flannel 二、部署 Dashboard 一、Kubeadm搭建K8S 1.1环境准备 服务器IP配置master(2C/4G,cpu核心…

JVM 调优

点击下方关注我,然后右上角点击...“设为星标”,就能第一时间收到更新推送啦~~~ JVM调优是一项重要的任务,可以提高Java应用程序的性能和稳定性。掌握JVM调优需要深入了解JVM的工作原理、参数和配置选项,以及历史JVM参数的调整和优…

连通块是什么

刷题的时候遇到一个名词概念,连通块是什么? 在图论中,无向图中的连通块(也叫作连通分量)是指原图的一个子图(即该子图只包含原图中的部分或全部顶点及边),该子图任意两个顶点都能通…

基于DiscordMidjourney API接口实现文生图

https://discord.com/api/v9/interactions 请求头: authorization:取自 浏览器中discord 文生图请求头中的 authorization 的值 Content-Type:application/json 请求体: {“type”:2,“application_id”:“93692956130267xxxx”,“guild_id”:“1135900…

Unity Sort Group(排序组)

** Unity 中的Sort Group组组件允许让Sprite Renderer(精灵渲染器)重新决定渲染顺序. ** 作为组件存在 组件内容: Unity 使用Sort Group 组件的Sort layer 和Order in layer的值来确定排序组在渲染队列内相对与场景内其他排序组和游戏对象的优先级。 属性功能So…

PHP使用PhpSpreadsheet实现导出Excel时带下拉框列表 (可支持三级联动)

因项目需要导出Excel表 需要支持下拉 且 还需要支持三级联动功能 目前应为PHPExcel 不在维护,固采用 PhpSpreadsheet 效果如图: 第一步:首先 使用composer 获取PhpSpreadsheet 我这里PHP 版本 7.4 命令如下: composer r…

Charles抓包工具使用(一)(macOS)

Fiddler抓包 | 竟然有这些骚操作,太神奇了? Fiddler响应拦截数据篡改,实现特殊场景深度测试(一) 利用Fiddler抓包调试工具,实现mock数据特殊场景深度测试(二) 利用Fiddler抓包调试工…

分布式电网动态电压恢复器模拟装置电子设计大赛

wx供重浩:创享日记 对话框发送:85电网 获取完整论文报告结构框图工程源文件 摘要:本装置采用DC-AC及AC-DC-AC双重结构,前级采用功率因数校正(PFC)电路完成AC-DC变换,改善输入端电网电能质量。后…

第28天-Kubernetes架构,集群部署,Ingress,项目部署,Dashboard

1.K8S集群部署 1.1.k8s快速入门 1.1.1.简介 Kubernetes简称k8s,是用于自动部署,扩展和管理容器化应用程序的开源系统。 中文官网:https://kubernetes.io/zh/中文社区:https://www.kubernetes.org.cn/官方文档:https…

【期末课程设计】学生成绩管理系统

因其独特,因其始终如一 文章目录 一、学生成绩管理系统介绍 二、学生成绩管理系统设计思路 三、源代码 1. test.c 2. Student Management System.c 3.Stu_System.c 4.Teacher.c 5.Student Management System.h 前言: 学生成绩管理系统含教师…

刷题DAY16

题目一 给定两个字符串str1和str2,再给定三个整数ic、dc和rc,分别代表插入、删除和替换一个字符的代价,返回将str1编辑成str2的最小代价。【举例]str1"abc",str2“adc",ic5,dc3,rc2从“abc“编辑成adc",把b替换成d是代价…

Android学习之路(1) App工程的项目结构

一、App工程的项目结构 1.项目下面有两个分类 一个是app(代表app模块),另一个是Gradle Scripts。其中app下面又有3个子目录,其功能说明如下: manifests 子目录下面只有一个XML文件,即AndroidManifest.xmljava子目录,…

华为QinQ技术的基本qinq和灵活qinq 2种配置案例

基本qinq配置: 运营商pe设备在收到同一个公司的ce发来的的包,统一打上同样的vlan ,如上图,同一个家公司两边统一打上vlan 2,等于在原内网vlan 10或20过来的包再统一打上vlan 2的标签,这样传输就不会和其它…

PostMan调用gitlab接口,OAuth 2.0 身份认证 API ,copy完事~

获取token接口: https://gitlab.***.com/oauth/token ,接下来就可以调用其他功能的接口了 例:创建账户,将获取到的access_token放置在接口请求的token中 其他接口调用同上

华为OD机试之报文回路(Java源码)

题目描述 IGMP 协议中响应报文和查询报文,是维系组播通路的两个重要报文,在一条已经建立的组播通路中两个相邻的 HOST 和 ROUTER,ROUTER 会给 HOST 发送查询报文,HOST 收到查询报文后给 ROUTER 回复一个响应报文,以维持…

【前端知识】React 基础巩固(四十六)——自定义Hook的应用

React 基础巩固(四十六)——自定义Hook的应用 一、自定义Hook的应用 自定义Hook本质上只是一种函数代码逻辑的抽取,严格意义上而言,它并不算React的特性。 实现组件创建/销毁时打印日志 import React, { memo, useEffect, useState } from "react…

嵌入式开发学习(STC51-13-温度传感器)

内容 通过DS18B20温度传感器,在数码管显示检测到的温度值; DS18B20介绍 简介 DS18B20是由DALLAS半导体公司推出的一种的“一线总线(单总线)”接口的温度传感器; 与传统的热敏电阻等测温元件相比,它是一…

神码ai火车头标题伪原创【php源码】

这篇文章主要介绍了如何把python 代码打包成可执行软件,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获,下面让小编带着大家一起了解一下。 火车头采集ai伪原创插件截图: Python 程序封装-打包成exe程…

【Apollo学习笔记】—— 相机仿真

文章目录 前言相关代码整理 测试实践文件目录包管理BUILD文件以及cyberfile.xml文件源程序BUILD运行结果其他参考CameraOutput channels启动camera驱动启动camera video compression驱动 前言 本文是对Cyber RT的学习记录,文章可能存在不严谨、不完善、有缺漏的部分&#xff0…