Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍

一、前言

单页面应用(SPA)的核心思想之一,就是更新视图而不重新请求页面,简单来说,它在加载页面时,不会加载整个页面,只会更新某个指定的容器中的内容。对于大多数单页面应用,都推荐使用官方支持的vue-router。

在实现单页面前端路由时,提供了两种方式,分别是hash模式和history模式,根据mode参数来决定采用哪一种方式。

const router = new VueRouter({routes,mode: "history" // 或者 "hash"
})
二、hash模式
http://example.com/#/home

Hash模式是Vue.js中默认的URL管理模式。在Hash模式下,URL中的#符号用于标识页面状态的变化。当页面中的路由发生改变时,Vue.js会使用Hash模式来更新URL,并在页面中渲染相应的组件。

  • Hash模式是通过监听hashChange事件来实现的,前端js把当前hash地址对应的组件渲染到浏览器中。
  • 在地址栏URL上有#号。
  • 通常用于单页面应用(SPA),支持页面内的导航,不会刷新页面,也不会影响服务器。
  • Hash出现在URL中,但不包括在http请求中,对后端没有影响。
  • 在进行URL跳转时,如果只改变hash,不会重新加载页面。
hashchange 事件:

当hash值改变时会触发这个事件,通过 location.hash 获取到最新的 hash 值

注意:

  • hash 值的变化不会导致浏览器像服务器发送请求
  • location.hash可以获取hash值
  • hashchange是hash值发生改变的调用的函数

语法:

window.onhashchange = function () {console.log(location.hash);
};// 或window.addEventListener('hashchange', ()=>{console.log(location.hash);
});
三、history模式
http://example.com/home

History模式是另一种URL管理模式,它使用HTML5的History API来实现URL的变化和页面的刷新。在History模式下,URL中的#符号被移除,取而代之的是通过History API来管理页面的状态。

History模式的优点在于它能够实现平滑的页面过渡,提高用户体验。同时,由于URL中不包含#符号,因此也适用于搜索引擎优化。然而,History模式需要在服务器端进行额外的配置,以确保能够正确地处理不同的URL路径请求。

  • History模式是通过调用history.pushState方法(或者replaceState)并且监听popstate事件来实现的。history.pushState会追加历史记录,并更换地址栏地址信息,但是页面不会刷新。
  • 需要服务器端做额外的配置,否则可能会出现刷新页面时的404错误。
  • 在进行URL跳转时,即使只改变hash,也需要重新加载页面(如果当前页面不是SPA)。
  • 支持浏览器的前进、后退功能。
方法:
1、history.go():

通过当前页面的相对位置从浏览器历史记录(会话记录)异步加载页面。

参数:

  • 参数为 -1 的时候为上一页,
  • 参数为 1 的时候为下一页。
  • 当你指定了一个越界值,例如:当会话历史记录中没有之前访问的页面时,则传参的值为 -1,那么这个方法没有任何效果也不会报错。
  • 调用没有参数的 go() 方法或者参数值为 0 时,重新载入当前页面。
  • Internet Explorer 允许你指定一个字符串,而不是整数,以转到历史记录列表中的特定 URL。
2、history.back():

此异步方法转到浏览器会话历史的上一页,与用户单击浏览器的 Back 按钮的行为相同。等价于 history.go(-1)。

调用此方法回到会话历史的第一页之前没有效果并且不会引发异常。

3、history.forward():

此异步方法转到浏览器会话历史的下一页,与用户单击浏览器的 Forward 按钮的行为相同。等价于 history.go(1)。

调用此方法超越浏览器历史记录中最新的页面没有效果并且不会引发异常。

4、History.replaceState()

替换当前页在历史记录中的信息

语法:

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

参数:

  • stateObj:状态对象是一个 JavaScript 对象,它与传递给 replaceState 方法的历史记录实体相关联。

  • title:大部分浏览器忽略这个参数, 将来可能有用。在此处传递空字符串应该可以防止将来对方法的更改。或者,你可以为该状态传递简短标题。

  • url:可选,历史记录实体的 URL. 新的 URL 跟当前的 URL 必须是同源; 否则 replaceState 抛出一个异常。

5、History.pushState()

向历史记录中追加一条记录

语法:

pushState(stateObj, title, url)

参数:

  • stateObj:一个用于表示历史记录状态的JavaScript对象。这个对象的内容会被添加到浏览器的历史堆栈中。这个参数是可选的。
  • title:为新的历史记录条目提供标题。这个参数通常可以设置为null,因为大多数浏览器在显示历史记录列表时并不使用这个标题。
  • url:可选,要添加到历史记录中的新URL。这个 URL 必须与当前页面处于同一个域中,否则浏览器可能会阻止这个操作。

优势:

  • pushState()设置的新的url可以是于当前url同源的任意url,而hash只可修改#后面的部分,因此只能设置与当亲url同文档的url。

  • pushState()设置的新的url可以与当前url一摸一样,这样也会把记录添加到栈中;而hash设置的新值必须与原来的不一样才会触发动作将记录添加到栈中。

  • pushState()通过stateObject参数可以添加任意类型的数据到记录中;而hash只可添加短字符串。

当你在SPA中使用history.pushState()或者history.replaceState()时,你可能会希望更改浏览器的URL,但是不刷新页面。这可以让你的SPA具有更好的用户体验,因为用户可以点击浏览器的后退和前进按钮来导航,而不需要在你的应用中进行额外的点击。

popState 事件

每当同一个文档的浏览历史(即history)出现变化时,就会触发popState事件。

注意:

  • 仅仅调用pushState方法或replaceState方法,并不会触发该事件,只有用户点击浏览器后退和前进按钮时,或者使用js调用back、forward、go方法时才会触发。

  • 该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件不会被触发。

  • 页面第一次加载的时候,浏览器不会触发popState事件。

语法:

window.onpopstate = function (event) {console.log('location: ' + document.location);console.log('state: ' +JSON.stringify(event.state));
};// 或window.addEventListener('popstate', function(event) {console.log('location: ' + document.location);console.log('state: ' + JSON.stringify(event.state));
});
四、nginx配置

hash模式下,仅hash符号#之前的内容会被包含在请求中,比如http://www.example.com/home 因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误;

history模式下,前端的url必须和实际后端发起请求的url一致,如http://example.com/about/id 。如果后端缺少对/about/id 的路由处理,将返回404错误。

在Vue.js中,可以使用vue-router库来实现Hash模式和History模式。通过配置vue-router的mode属性,可以选择使用Hash模式或History模式。需要注意的是,项目部署生产后,hash 模式能够正常使用,而 history 模式访问不到资源。hash 的改变不会发生请求,因此不影响服务器端,所以 nginx 不会拦截,而 history 模式则需要设置可访问的配置。

比如http://www.example.com/home 如果不进行配置,那么 nginx 默认会去找服务器目录下的 home 文件,而我们想要的效果则是依旧寻找 index 文件,home 则交给前端去处理,nginx 使用 try_files 配置即可实现该效果。

location / { root /www/wwwroot; index index.html; try_files $uri $uri/ /index.html; 
}
五、如何选择合适的路由模式

使用 Hash 模式:

  • 如果你的项目不需要考虑兼容性问题,或者需要在旧版浏览器中支持路由功能。
  • 如果你希望简化部署过程,只需将静态文件部署到服务器即可。

使用 History 模式:

  • 如果你希望 URL 更加美观、简洁,不希望在 URL 中出现 # 符号。
  • 如果你可以进行服务器配置,确保在直接访问 URL 时返回正确的页面。
  • 如果你的项目不需要考虑旧版浏览器的兼容性问题。

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

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

相关文章

动态代理配置方法。如何使用代理IP保护隐私安全?

随着网络技术的不断发展,越来越多的人开始使用代理IP来保护自己的隐私安全。代理IP是一种通过代理服务器来访问网络的特殊技术,可以隐藏用户的真实IP地址,从而保护用户的隐私。本文将介绍动态代理的配置方法以及如何使用代理IP保护隐私安全。…

PyTorch 基础篇(1):Pytorch 基础

Pytorch 学习开始 入门的材料来自两个地方: 第一个是官网教程:WELCOME TO PYTORCH TUTORIALS,特别是官网的六十分钟入门教程 DEEP LEARNING WITH PYTORCH: A 60 MINUTE BLITZ。 第二个是韩国大神 Yunjey Choi 的 Repo:pytorch-t…

Transformer中的layer norm(包含代码解释)

在transformer中存在add&norm操作,add操作很简单,就是把注意力矩阵和原来的矩阵相加,也就是残差链接,可以有效减少梯度消失。如下图所示,为layer norm的解释图,可以看出layer norm是针对一个token来做的…

接口自动化测试总结,接口鉴权+加密与解密+数据库操作/断言...

前言 1、接口鉴权的多种方式 1)后端接口鉴权常用方法 cookie: 携带身份信息请求认证 之后的每次请求都携带cookie信息,cookie记录在请求头中 token: 携带身份信息请求认证 之后的每次请求都携带token认证信息 可能记录在请求头…

Java随记

Java java保留两位小数 1、使用String.format()方法: public static void stringFormatdecimalFormatKeepTwoDecimalPlaces(){double number 3.1415926;String result String.format("%.2f", number);System.out.println(result);}输出:3…

Large Language Models areVisual Reasoning Coordinators

目录 一、论文速读 1.1 摘要 1.2 论文概要总结 二、论文精度 2.1 论文试图解决什么问题? 2.2 论文中提到的解决方案之关键是什么? 2.3 用于定量评估的数据集是什么?代码有没有开源? 2.4 这篇论文到底有什么贡献&#xff1…

第十五章 : Spring Boot 集成MyBatis 多种方式

第十五章 : Spring Boot 集成MyBatis 方式 前言 本章知识重点:Spring Boot集成MyBatis的两种方式:注解方式和配置文件集成方式,重点推荐一款脚手架工具-mybatis-plus3以及如何在Idea中集成与应用;大大提高了开发效率,代码更加规范和简洁。 Spring Boot数据访问概述 在…

振弦采集仪助力岩土工程质量控制

振弦采集仪助力岩土工程质量控制 随着工程建设规模越来越大,建筑结构的安全性和稳定性越来越成为人们所关注的焦点。岩土工程在工程建设中占据着非常重要的地位,岩土工程质量控制更是至关重要。而振弦采集仪作为一种先进的检测设备,正得到越…

[PyTorch][chapter 5][李宏毅深度学习][Classification]

前言: 这章节主要讲解常用的分类器原理.分类主要是要找到一个映射函数 比如垃圾邮件分类 : c0, 垃圾邮件 c1 正常邮件 主要应用场景: 垃圾邮件分类,手写数字识别,金融信用评估. 这里面简单了解一下,很少用 目录: 1: …

还记得当初自己为什么选择计算机?

还记得当初自己为什么选择计算机? 当初你问我为什么选择计算机,我笑着回答:“因为我梦想成为神奇的码农!我想像编织魔法一样编写程序,创造出炫酷的虚拟世界!”谁知道,我刚入门的那天&#xff0…

离线数仓构建案例一

数据采集 日志数据(文件)到Kafka 自己写个程序模拟一些用户的行为数据,这些数据存在一个文件夹中。 接着使用flume监控采集这些文件,然后发送给kafka中待消费。 1、flume采集配置文件 监控文件将数据发给kafka的flume配置文件…

STM32——定时器Timer

定时器工作原理 软件定时 缺点:不精确、占用 CPU 资源 void Delay500ms() //11.0592MHz {unsigned char i, j, k;_nop_();i 4;j 129;k 119;do{do{while (--k);} while (--j);} while (--i); } 使用精准的时基,通过硬件的方式,实现定时功…

Linux---访问NFS存储及自动挂载

本章主要介绍NFS客户端的使用 创建NFS服务器并通过NFS共享一个目录在客户端上访问NFS共享的目录自动挂载的配置和使用 访问NFS存储 前面介绍了本地存储,本章就来介绍如何使用网络上的存储设备。NFS即网络文件系统, 所实现的是 Linux 和 Linux 之间的共…

TypeScript中泛型函数

一.概览 此前,对泛型有了整体的概览,详见TypeScript中的泛型,后面的系列会详细地介绍TypeScript的泛型。此篇文章主要介绍泛型函数 二. 泛型函数 泛型是类型不明确的数据类型,在定义时,接收泛指的数据类型&#xff…

易点易动:颠覆固定资产用量管理,实现高效精准的企业固定资产管理

固定资产用量管理是企业日常运营中不可或缺的一环。然而,传统的人工管理方式面临着时间成本高、数据不准确、难以监控等问题。为了解决这些挑战,易点易动应运而生,它是一款先进的资产管理系统,能够帮助企业实现高效精准的固定资产…

【Java项目管理工具】Maven

Maven 文章目录 Maven一、简介二、安装和配置三、GAVP四、IDEA Maven Java Web工程五、插件、命令、生命周期六、依赖配置七、构建配置八、依赖传递与依赖冲突九、Maven工程继承和聚合关系9.1 工程继承关系9.2 工程聚合关系 十、Maven私服10.1 Nexus下载安装10.2 Nexus上的各种…

案例054:基于微信的追星小程序

文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序…

linux的权限741

741权限 在 Linux 中,文件和目录的权限由三组权限来定义,分别是所有者(Owner)、所属组(Group)和其他用户(Others)。每一组权限又分为读(Read)、写&#xff0…

c++函数模板STL详解

函数模板 函数模板语法 所谓函数模板,实际上是建立一个通用函数,其函数类型和形参类型不具体指定,用一个虚拟的类型来代表。这个通用函数就称为函数模板。 凡是函数体相同的函数都可以用这个模板来代替,不必定义多个函数&#xf…

Java安全之Commons Collections5

CC5分析 import org.apache.commons.collections.Transformer; import org.apache.commons.collections.functors.ChainedTransformer; import org.apache.commons.collections.functors.ConstantTransformer; import org.apache.commons.collections.functors.InvokerTransfo…