浅析Vue前端路由中 hash 与 history的区别
时间:2022-05-14 [网络编程]作者:fabuyuan 浏览:4 次
没了解这两种路由前,不管是
vue
还是react
在项目创建时难免会进行路由之间选择,在hash
和history
难免会纠结一番,或者是直接稀里糊涂用了默认带#
的hash
路由,看完这篇分享,保准让你之后不会在为选择哪中路由犯难,实现按需选择。有疑问欢迎在评论区指出,大家一起沟通。
简单介绍 Vue Router
Vue Router
是 Vue.js 网的路由插件,它和 Vue.js 是深度集成的,适合用于构建单页面应用。vue
的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router
单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。(学习视频分享:vue视频教程)- 至于我们为什么不能用a标签,这是因为用Vue做的都是单页应用,就相当于只有一个主的
index.html
页面,所以你写的 标签是不起作用的,你必须使用vue-router
来进行管理。
Vue Router 实现原理
在了解路由模式前,我们要先清楚,
vue-roter
的实现原理是怎样的,什么是单页面应用,特点是什么,这样更容易加深对路由的理解。SPA
单页面及应用方式:单一页面应用程序,只有一个完整的页面;它在第一次加载页面时,就将唯一完整的html
页面和所有其余页面组件一起下载下来,这样它在切换页面时,不会加载整个页面,而是只更新某个指定的容器中内容。单页面应用(
SPA
)的核心之一是: 更新视图而不重新请求页面。路由器对象底层实现的三大步骤即(1)监视地址栏变化;(2)查找当前路径对应的页面组件;(3)将找到的页面组件替换到
router-vieW
的位置。vue-router
在实现单页面前端路由时,提供了两种方式:Hash
模式和History
模式;vue2 是根据mode
参数来决定采用哪一种方式,vue3 则是history
参数,下面我们将围绕这个属性进行进一步了解。
Hash
简述
vue-router
默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。hash
(#)是URL
的锚点,代表的是网页中的一个位置,单单改变#
后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说#
是用来指导浏览器动作的,对服务器端完全无用,HTTP
请求中也不会不包括#
,同时每一次改变#
后的部分,都会在浏览器的访问历史中增加一个记录,使用 "后退" 按钮,就可以回到上一个位置,所以说hash
模式通过锚点值的改变,根据不同的值,渲染指定DOM
位置的不同数据。#
符号本身以及它后面的字符称之为hash
,可通过window.location.hash
属性读取。
特点
hash
虽然出现在URL中,但不会被包括在HTTP
请求中。它是用来指导浏览器动作的,对服务器端完全无用,因此,改变hash
不会重新加载页面- 可以为
hash
的改变添加监听事件: window.addEventListener("hashchange", fncEvent, false)复制代码
- 每一次改变 hash(
window.location.hash
),都会在浏览器的访问历史中增加一个记录 - url 带一个
#
号。
设置
- vue3 设置
hash
模式路由
history
简述
history
是路由的另一种模式,由于 hash 模式会在 url 中带#,如果不想要带 #的话,我们可以使用路由的history
模式,只需要在响应的router
配置规则时,加上即可,vue
的路由默认是hash
模式。- 利用了
HTML5 History Interface
中新增的pushState()
和replaceState()
方法。 - 这两个方法应用于浏览器的历史记录栈,在当前已有的
back、forward、go
的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。
设置
特点
- 路由跳转不需要重新加载页面。
- 不带 # 在大部分人看来要比 hash 路由好看许多。
- 兼容性没有 hash 好,会在下面展开说明
生产环境问题及解决
- 当我们把 history 项目部署到服务器中后,此时我们在浏览器输入一个网址(比如是
www.test.com
), 此时会经过 dns 解析,拿到 ip 地址后根据 ip 地址向该服务器发起请求,服务器接受到请求后,然后返回相应的结果(html,css,js)。如果我们在前端设置了重定向,此时页面会进行跳转到www.test.com/home
,在前端会进行匹配对应的组件然后将其渲染到页面上。此时如果我们刷新页面的话,浏览器会发送新的请求www.test.com/home
, 如果后端服务器没有 /home 对应的接口,那么就会返回404。 - 生产环境 刷新 404 的解决办法可以在
nginx
做代理转发,在 nginx 中配置按顺序检查参数中的资源是否存在,如果都没有找到,让 nginx 内部重定向到项目首页。
开发环境- historyApiFallback
有些小伙伴会有疑问,为什么开发环境没有遇到这个问题呢,不是和生产同样的刷新操作嘛。
这里我也是疑问了一下,经查阅相关资料后发现在
vue-cli
中webpack
帮我们做了处理如果我们把该配置改位 false,浏览器会把我们这个当做是一次 get 请求,如果后端没有对应的接口,就会出现下面这个报错提示。
总结
至此我们使用知道了
vue-roter
的两种路由模式,及差异化,简单来讲就是,hash
路由兼容梗好,但是带#显得丑些,histroy
和正常 url 路径一样,但是需要在服务器进行单独配置。大家可以根据自己的喜好去按需使用。有疑问的同学欢迎在评论区进行沟通。
(学习视频分享:web前端开发、编程基础视频)
以上就是浅析Vue前端路由中 hash 与 history的区别的详细内容,更多请关注站长家园其它相关文章!
本文标签: Vuevue.js
转载请注明来源:浅析Vue前端路由中 hash 与 history的区别
本文永久链接地址:https://www.adminjie.com/post/12314.html
免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。
更多精彩内容
- VUE中V-IF条件判断改变元素的样式操作
- Discuz如何解决安装时报错run_sql_error
- 低版本VS项目在VS2019无法正常编译的问题
- PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
- Oracle数据库的实例/表空间/用户/表之间关系简单讲解
- RSA2是啥?PHP-RSA2签名验证怎么实现?
- 华为dubal20是什么型号
- ana an00华为是什么型号
- html5的标题标记一共有几个等级
- 电脑显示信号线无连接是什么意思
- html5中onclick是什么意思
- 小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?
- app是什么应用程序的简称
- angular与bootstrap的区别是什么
- 一个邮箱可以有几个微信小程序

- 最新文章
-
-
jquery怎么判断元素是否有子节点
方法:1、用children()获取元素下的所有子节点,语法“元素对象.children()”,会返回一个包含子节点的jQ对象;2、用length检测子节点个数...
-
jquery对象访问的方法有哪些
jquery对象访问的方法有:1、each(),可以遍历指定的jquery对象,语法“$.each(对象,回调函数)”;2、size(),可统计jquery对象...
-
jquery怎么根据id判断元素是否存在
判断方法:1、通过id属性值获取指定元素,语法“$("#id值")”,会返回一个包含指定元素的jQuery对象;2、使用“元素对象.length>0”语句...
-
jquery怎么删除所有li元素
删除方法:1、利用find()选取文档的所有li元素,语法“$("body").find("li")”,返回一个包含所有li元素的jQuery对象;2、利用re...
-
oracle怎么查询表的同义词
在oracle中,可以利用select语句配合“dba_synonyms”查询表的所有同义词,语法为“select*fromdba_synonyms”;同...
-
- 热门文章
-
-
VUE中V-IF条件判断改变元素的样式操作
这篇文章主要介绍了VUE中V-IF条件判断改变元素的样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随想过来看看吧...
-
Discuz如何解决安装时报错run_sql_error
问题环境VMware虚拟机Centos7.3PHP7.0MySQL8.0NGINX1.14Discuz3.4问题还原本地环境为PHP5.6+MySQL5.6在安...
-
低版本VS项目在VS2019无法正常编译的问题
低版本VS项目在VS2019无法正常编译的问题这里指的编译并不准确,只是为了方便说明。后有(未安装),201?...
-
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
实现原理使用redis链表来做,因为pop操作是原子的,即使有很多用户同时到达,也是依次执行,推荐使用。实现步骤第一步,先将商品库存入队列/**.trigge...
-
Oracle数据库的实例/表空间/用户/表之间关系简单讲解
完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例。Oracle是一种数据库管理系统,是一种关系型的数据库管理系统。我们用这些高级权限账号...
-