hash模式和history模式

在Vue Router中,有两种路由模式可供选择:hash模式和history模式。它们各自有一些优点和缺点,下面是它们的简要介绍:

  • hash模式的原理是通过hashchange事件,通过监听hash变化来驱动界面变化。它的url中有 # 号

  •   1、监听地址栏中hash变化驱动界面变化2、用pushsate记录浏览器的历史,驱动界面发送变化
    
  • history模式的原理是通过popstate事件,通过监听浏览器历史记录变化来驱动界面变化。
    需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。

  • 只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back())它的url中没有 # 号

  • 项目上线之后,需要在后端服务器额外配置,否则会出现404错误

  •  history 模式核心借用 HTML5 history api,api 提供了丰富的 router 相关属性先了解一个几个相关的 apipushState 向浏览器历史纪录添加记录replaceState修改浏览器历史纪录中当前纪录popState 事件, 当 history 发生变化时触发
    

Hash模式:

优点:

  • 兼容性好:Hash模式使用URL中的哈希值(#)来模拟路由,不会触发页面的刷新,因此在各种浏览器和服务器环境下都能正常工作。
  • 简单配置:不需要服务器端的特殊配置,只需在前端配置即可。

缺点:

  • URL不美观:由于使用哈希值,URL中会出现#符号,对于用户来说不够友好。
  • 有一定冗余:每次路由切换时,URL中的哈希值会发生变化,但页面不会刷新,这可能会导致一些冗余的哈希值出现在URL中。

History模式:

优点:

  • URL美观:History模式使用真实的URL路径,没有#符号,对于用户来说更加友好。
  • 无冗余:每次路由切换时,URL路径会发生变化,但页面不会刷新,不会出现冗余的URL。

缺点:

  • 兼容性较差:History模式依赖HTML5的History API,不支持的浏览器会导致路由无法正常工作。需要服务器端的特殊配置,以确保在路由- 刷新时能正确返回对应的页面。
  • 需要后端支持:当用户直接访问History模式下的URL时,需要服务器端正确配置,以返回对应的页面,否则会导致404错误。

选择使用哪种模式取决于你的项目需求和实际情况。如果你的项目需要兼容性好且不需要美观的URL,可以选择Hash模式。如果你的项目追求更美观的URL,并且能够进行服务器端配置,可以选择History模式。

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

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

相关文章

Vuetify:定制化、响应式的 Vue UI 库 | 开源日报 No.83

vuetifyjs/vuetify Stars: 38.1k License: MIT Vuetify 是一个无需设计技能的 UI 库,具有精美手工制作的 Vue 组件。它具有以下核心优势和主要功能: 可定制性:使用 SASS/SCSS 进行广泛自定义,并提供默认配置和蓝图。响应式布局&…

C++标准模板(STL)- 类型支持 (类型修改,从给定类型移除 const 或/与 volatile 限定符,std::remove_cv)

类型特性 类型特性定义一个编译时基于模板的结构&#xff0c;以查询或修改类型的属性。 试图特化定义于 <type_traits> 头文件的模板导致未定义行为&#xff0c;除了 std::common_type 可依照其所描述特化。 定义于<type_traits>头文件的模板可以用不完整类型实例…

debian10 开启rdp安装firefox并解决firefox 中文乱码

debian10 开启rdp安装firefox apt -y install tigervnc-standalone-server apt -y install xrdp tigervnc-standalone-server systemctl enable xrdp --nowapt install firefox-esrmstsc连接 firefox-settings-general-fonts-advanced-Simplified Chinese

如何看待Unity新收费模式?

Unity新收费模式的变化主要在于将收费重心从功能分级收费转变为资源使用量收费&#xff0c;这个改变已经引起了一定的争议和反响。以下是我个人的看法&#xff1a; 优点&#xff1a; 更公平的收费方式&#xff1a;新的收费模式将更加公平&#xff0c;用户只需按照实际使用的数…

汇编-PUSHFD和POPFD标志寄存器值压栈和出栈

PUSHFD指令将32位EFLAGS寄存器内容压入堆栈&#xff0c; 而POPFD指令则将栈顶单元内容弹出到EFLAGS寄存器 格式&#xff1a;

接口自动化测试:pytest基础讲解

为什么要做接⼝测试&#xff1f; 只靠前端测试很难确保很⾼的覆盖率。接⼝测试&#xff0c;可以模拟出各种类型的⼊参&#xff0c;包括⼀些在前端模拟不出来的⼊参&#xff0c;还能根据接⼝⽂档的定义&#xff0c;设计出相对完善的⼊参值&#xff0c;在接⼝层保证质量&#xf…

常见树种(贵州省):006栎类

摘要&#xff1a;本专栏树种介绍图片来源于PPBC中国植物图像库&#xff08;下附网址&#xff09;&#xff0c;本文整理仅做交流学习使用&#xff0c;同时便于查找&#xff0c;如有侵权请联系删除。 图片网址&#xff1a;PPBC中国植物图像库——最大的植物分类图片库 一、麻栎 …

基础课10——自然语言生成

自然语言生成是让计算机自动或半自动地生成自然语言的文本。这个领域涉及到自然语言处理、语言学、计算机科学等多个领域的知识。 1.简介 自然语言生成系统可以分为基于规则的方法和基于统计的方法两大类。基于规则的方法主要依靠专家知识库和语言学规则来生成文本&#xff0…

博客摘录「 【Linux】线程池」2023年10月14日

一种线程使用模式。线程过多会带来调度开销&#xff0c;进而影响缓存局部性和整体性能。而线程池维护着多个线程&#xff0c;等待着 监督管理者分配可并发执行的任务。这避免了在处理短时间任务时创建与销毁线程的代价。线程池不仅能够保证内核的充分利 用&#xff0c;还能防止…

Vue公共loading升级版(处理并发异步差时响应)

公共loading是项目系统中很常见的场景&#xff0c;处理方式也不外乎三个步骤&#xff1a; 通过全局状态管理定义状态值&#xff08;vuex、pinia等&#xff09;。 在程序主入口监听状态值变化&#xff0c;从而展示/隐藏laoding动画。 在请求和相应拦截器中变更状态值。 第一二…

svn文件不显示红色感叹号

如下图所示&#xff0c;受svn版本控制的文件不显示下图中红色感叹号和绿色对号时&#xff0c; 可以试着如下操作 空白处单击右键&#xff0c;具体操作如下图

Rust可空类型Option

文章目录 Option基础模式匹配unwrap Rust基础教程&#xff1a;初步⚙所有权⚙结构体和枚举类⚙函数进阶⚙泛型和特征⚙并发和线程通信⚙cargo包管理 Rust进阶教程&#xff1a;用宏实现参数可变的函数⚙类函数宏 Option基础 在一些编程语言中&#xff0c;允许存在空值&#xf…

docker的基本使用以及使用Docker 运行D435i

1.一些基本的指令 1.1 容器 要查看正在运行的容器&#xff1a; sudo docker ps 查看所有的容器&#xff08;包括停止状态的容器&#xff09; sudo docker ps -a 重新命名容器 sudo docker rename <old_name> <new_name> <old_name> 替换为你的容器名称…

用 HLS 实现 UART

用 HLS 实现 UART 介绍 UART 是一种旧的串行通信机制&#xff0c;但仍在很多平台中使用。它在 HDL 语言中的实现并不棘手&#xff0c;可以被视为本科生的作业。在这里&#xff0c;我将通过这个例子来展示在 HLS 中实现它是多么容易和有趣。 因此&#xff0c;从概念上讲&#xf…

内存池的面试整理

文章思路来源 如何实现无锁申请&#xff1f; 每个线程申请自己的TreadCacheTLS对象&#xff0c;来管理自己的freeList数组。小内存的大小&#xff1f; 0-256K&#xff0c;并且对申请到的内存进行字节对齐&#xff0c;保证申请到的内存可以映射到对应的freeList中。映射规则&am…

Linux命令(129)之dstat

linux命令之dstat 1.dstat介绍 linux命令dstat是用来实时显示系统中各个进程的资源占用情况 2.dstat用法 dstat [参数] dstat参数 参数说明-c显示CPU的相关信息-d显示磁盘的相关信息-g显示page相关的统计数据-m显示内存的相关统计数据-n显示网络的相关统计数据-p显示进程的…

配置你的VsCode服务器,随时随地写代码!

Hello&#xff0c;大家好&#xff0c;好久不见&#xff01;前段时间忙着秋招和论文&#xff0c;临近秋招结束&#xff0c;终于有时间更新了 前段时间实验室搞一个4090服务器&#xff0c;终于可以无所忌惮地跑深度学习咯&#xff0c;刚好要配置环境&#xff0c;今天就教大家通…

Unity收费对谁影响最大

Unity的收费政策对以下几类人群影响最大&#xff1a; 游戏开发商&#xff1a;Unity收费政策中最直接的影响对象就是游戏开发商。对于那些使用Unity引擎制作游戏的开发商来说&#xff0c;他们将需要考虑新的许可证费用和服务费用&#xff0c;这可能会对他们的盈利和发展产生影响…

EASYEXCEL(一)

1.读取excel 读监听器 Slf4j public class StudentReadListener extends AnalysisEventListener<Student> {// 每读一样&#xff0c;会调用该invoke方法一次Overridepublic void invoke(Student data, AnalysisContext context) {System.out.println("data "…

Linux MYSQL-5.7.23-rpm安装(附带安装包)

系统环境 OS 版本(Linux) CentOS-7-x86_64-Minimal-1511Java版本 jdk1.7及以上 卸载系统自带mariadb-lib rpm -qa|grep mariadbrpm -e mariadb-libs-5.5.68-1.el7.x86_64 --nodeps解压tar包 tar -xvf mysql*.tar以下加粗rpm包需要安装&#xff1a; mysql-community-common…