Vue2面试题:说一下路由模式hash和history的区别?

    在单页面应用SPA中,路由描述的是URL与视图之间的映射关系,这种映射是单向的,即URL变化引起视图更新(无需刷新页面)。  

    1、hash模式

        原理:

            用 url + #后面的hash值 来模拟一个完整的url,直接刷新页面不会导致浏览器向服务器发出新的请求,路由切换时不会

            当调用$router.push方法,会改变hash值触发hashchange事件,前进到指定的url。vue-router会根据url做路由匹配来修改页面内容,实现路由切换的效果

            改变hash值触发hashchange事件,hashchange事件对象中会记录变化的url。点击浏览器的前进后退,会改变hash值,实现路由切换的效果

        特点:

            地址栏有#,影响美观,直接刷新页面不会报404

2、history模式

        原理:

            用 url + 路径 真正实现一个完整的url,直接刷新页面会导致浏览器向服务器发出新的请求,路由切换时不会

            当调用$router.push方法,会改变路径调用pushState方法,前进到指定的url。vue-router会根据url做路由匹配来修改页面内容,实现路由切换的效果

            改变路径调用pushState方法,pushState方法中会记录变化的url。点击浏览器的前进后退 或者 手动调back、forward、go方法,会触发popstate事件,实现路由切换的效果

        特点:

            地址栏没有#,不影响美观,直接刷新页面会报404,需要后端在Nginx中做代理地址的配置

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

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

相关文章

指纹浏览器有什么用?AdsPower 指纹浏览器都有哪些优势?

说到指纹浏览器,各位跨境卖家肯定都不陌生,指纹浏览器已经成为跨境电商不可或缺的有力工具,那么它具体有什么作用呢?如今市场上指纹浏览器品牌琳琅满目,东哥有没有什么推荐呢?在这里,东哥将为大…

matter模组有无源测试事例

测试一款matter模组的硬件性能 1.1 天线阻抗、电压驻波比测试 主要测试:PCB板载天线设计效率及板材PCB铜面的平整度等 1.2 模组有源数据测试 主要测试:模组的阻抗匹配、频偏等情况 1.3 模组传输能量精度 主要测试:矢量误差等数据 1.4 模…

Unity2023.3(Unity6)版本开始将可以发布WebGPU

翻译一段官网上的话: 利用Unity 2023.3(正式发布时应该称为Unity6)中最新的WebGPU图形API集成,尝试最大限度的提升您的网络游戏的真实感。 通过与谷歌的战略合作,Unity实时3D平台的强大的图形功能现在为图形丰富的网络游戏进行微调&#xff0…

次模、K次模和超模有什么区别与联系,主要的作用是什么?

“次模”(Submodularity)、“K次模”(K-submodularity)和"超模"(Supermodularity)是描述集合函数性质的概念。以下是它们的区别、联系以及主要作用: 次模(Submodularity&a…

提升英语学习效率,尽在Eudic欧路词典 for Mac

Eudic欧路词典 for Mac是一款专为英语学习者打造的强大工具。无论您是初学者还是高级学习者,这款词典都能满足您的需求。 首先,Eudic欧路词典 for Mac具备丰富的词库,涵盖了各个领域的单词和释义。您可以轻松查询并学习单词的意思、用法和例…

猫粮哪个牌子好?盘点十大主食冻干猫粮品牌排行榜!

近年来,冻干猫粮作为备受追捧的高品质猫粮,吸引了越来越多养猫人的关注。新手养猫就弄不明白了,什么是冻干猫粮呢?冻干猫粮可以作为日常主食一直喂吗? 作为一位6年养猫人,我会用最简单的文字告诉你主食冻干…

安装NLTK Data

文章目录 NLTK离线安装1. 获取安装包2. 放置nltk_data文件3. Demo4. 参考链接 关注公众号:『AI学习星球』 算法学习、4对1辅导、论文辅导或核心期刊可以通过公众号或CSDN滴滴我 nltk库是python语言为自然语言处理提供的一个功能强大,简单易用的函数库&a…

android 13.0 当卸载otg设备开机不加载otg设备功能实现

1.概述 在13.0定制化rom产品开发过程中,客户有功能需求,通过系统属性值控制是否加载挂载otg设备,当设置为卸载模式时, 要求不能挂载otg设备,开机也不能挂载otg设备,接下来分析相关功能实现 2.卸载otg设备开机不加载otg设备的核心代码 frameworks/base/services/core/ja…

Todesk、向日葵等访问“无显示器”主机黑屏问题解决

我的环境是 ubuntu 22.04 安装 要安装 video dummy,请在终端中运行以下命令: sudo apt install xserver-xorg-video-dummy配置 video dummy 的配置文件请自行搜索 使用任何文本编辑器打开此文件。 我的是 /etc/X11/xorg.conf 默认配置文件包含以下内…

StrComp( ) 函数及instr( )函数示例(字符串比较与查找)

在编程中经常会遇到字符串比较与查找,此时就需要用到函数来解决了。如下: 这两个函数都有个共同点,如果严格比较字符(区分大小写),最后一位没有1,如果不区分大小写,最后一位有1&…

Java Web 01_HTML4HTML5基础标签语法

HMTL基础 1.什么是HTML Hyper Text Markup Language (超文本标记语言)标记又俗称标签(tag)&#xff0c;一般格式&#xff1a; <tagName></tagName> 如 <h1></h1>标签里还可以有属性(Attribute)&#xff1a; <tagName Atrribute “value” />…

C++ STL vector容器详解

vector 容器是 STL 中最常用的容器之一&#xff0c;它和 array 容器非常类似&#xff0c;都可以看做是对 C 普通数组的“升级版”。不同之处在于&#xff0c;array 实现的是静态数组&#xff08;容量固定的数组&#xff09;&#xff0c;而 vector 实现的是一个动态数组&#xf…

Debezium日常分享系列之:Debezium 2.5.0.CR1发布

Debezium日常分享系列之&#xff1a;Debezium 2.5.0.CR1发布 一、重大变化1.Cloud Event 标头的架构名称2.MySQL BIT 默认长度 二、新功能和改进1.重新选择列2.Debezium Server - 用于 Apache Kafka 接收器的 StreamNameMapper3.增量快照水印的 INSERT/DELETE 语义4.Debezium 服…

1.7 实战:Postman请求Post接口-登录

上一小节我们实战了使用Postman请求Get接口。本小节我们来使用Postman请求Post接口。 我们来测试一下登录,之前已经创建好了Collections。我们选择登录页下的登录这个请求。地址也是跟之前一样,我们打开校园二手交易系统,打开浏览器开发者工具,输入用户名和密码,点击登录…

力扣22. 括号生成(java 回溯法)

Problem: 22. 括号生成 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 我们首先要知道&#xff0c;若想生成正确的括号我们需要让右括号去适配左括号&#xff0c;在此基础上我们利用回溯去解决此题目 1.题目给定n个括号&#xff0c;即当回溯决策路径长度等于 2 n 2n…

网络基础2

三层交换机&#xff1a;路由器交换机 创建vlan 配置0/0/2串口为vlan2&#xff0c;3接口为vlan3 三层交换机的串口是不能直接配置地址&#xff0c;要在虚拟接口&#xff08;vlan的接口&#xff09;配置IP地址 配置vlan1的虚拟接口 此时vlan1的主机能ping通三层交换机串口1的地址…

西南交通大学【数电实验7---按键防抖动设计】

实验电路图、状态图、程序代码、仿真代码、仿真波形图&#xff08;可以只写出核心功能代码&#xff0c;代码要有注释&#xff09; 一共四个状态&#xff1a;1.未按下时空闲状态 2.按下抖动滤除状态 3.按下稳定状态 4.释放抖动滤除状态 在第一个状态时&#xff0c;等待按键按下&…

【jitterbuffer】3:VCMJitterEstimator及所需的概率知识:期望、方差、协方差

期望 : 全国的平均积雪深度 期望值为负 概率就是 不同国家的面积了,总面积是1 期望计算公式 某种函数的期望 K的求和范围 计算期望 1

Peter算法小课堂—简单建模(1)

简单建模是什么&#xff1f;建模模拟数据结构。 太戈编程2601题 题目描述&#xff1a; 你经过多年学习&#xff0c;获得了博士学位&#xff0c;一共发表了n篇论文&#xff0c;并且你的第 i 篇论文得到了来自其他研究文献的 ci 次引用。在学术圈里&#xff0c;通常会使用 H 指数…

Java常用API合集(一)

文章目录 一、StringBuilder类1.1 方法演示1.2 String 和StringBuilder互转1.3 String 和StringBuilder效率对比1.4 应用案例 二、StringJoiner类三、Math类四、System类五、Runtime类 一、StringBuilder类 StringBuilder代表可变字符串对象&#xff0c;相当于是一个容器&…