简单的了解下前端路由 hash 与 history 差异
前言
没了解这两种路由前,不管是
vue
还是react
在项目创建时难免会进行路由之间选择,在hash
和history
难免会纠结一番,或者是直接稀里糊涂用了默认带#
的hash
路由,看完这篇分享,保准让你之后不会在为选择哪中路由犯难,实现按需选择。有疑问欢迎在评论区指出,大家一起沟通。
简单介绍 Vue Router
Vue Router
是 Vue.js[1] 官方的路由插件,它和 Vue.js[2] 是深度集成的,适合用于构建单页面应用。vue
的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router
单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。至于我们为什么不能用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
参数,下面我们将围绕这个属性进行进一步了解。image.png
Hash
简述
image.png
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
模式路由image.png
history
简述
image.png
history
是路由的另一种模式,由于 hash 模式会在 url 中带#,如果不想要带 #的话,我们可以使用路由的history
模式,只需要在响应的router
配置规则时,加上即可,vue
的路由默认是hash
模式。利用了
HTML5 History Interface
中新增的pushState()
和replaceState()
方法。这两个方法应用于浏览器的历史记录栈,在当前已有的
back、forward、go
的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。
设置
image.png
特点
路由跳转不需要重新加载页面。
不带 # 在大部分人看来要比 hash 路由好看许多。
兼容性没有 hash 好,会在下面展开说明
生产环境问题及解决
当我们把 history 项目部署到服务器中后,此时我们在浏览器输入一个网址(比如是 www.test.com[3] ), 此时会经过 dns 解析,拿到 ip 地址后根据 ip 地址向该服务器发起请求,服务器接受到请求后,然后返回相应的结果(html,css,js)。如果我们在前端设置了重定向,此时页面会进行跳转到 www.test.com/home[4] ,在前端会进行匹配对应的组件然后将其渲染到页面上。此时如果我们刷新页面的话,浏览器会发送新的请求 www.test.com/home[5], 如果后端服务器没有 /home 对应的接口,那么就会返回404。
image.png
生产环境 刷新 404 的解决办法可以在
nginx
做代理转发,在 nginx 中配置按顺序检查参数中的资源是否存在,如果都没有找到,让 nginx 内部重定向到项目首页。image.png
开发环境- historyApiFallback
有些小伙伴会有疑问,为什么开发环境没有遇到这个问题呢,不是和生产同样的刷新操作嘛。
image.png
这里我也是疑问了一下,经查阅相关资料后发现在
vue-cli
中webpack
帮我们做了处理image.png
如果我们把该配置改位 false,浏览器会把我们这个当做是一次 get 请求,如果后端没有对应的接口,就会出现下面这个报错提示。
image.png
image.png
总结
至此我们使用知道了
vue-roter
的两种路由模式,及差异化,简单来讲就是,hash
路由兼容梗好,但是带#显得丑些,histroy
和正常 url 路径一样,但是需要在服务器进行单独配置。大家可以根据自己的喜好去按需使用。有疑问的同学欢迎在评论区进行沟通。
关于本文
来自:李白爱喝水
https://juejin.cn/post/7096034733649297421
The End
简单的了解下前端路由 hash 与 history 差异相关推荐
- 前端路由hash和history
路由: 路由是根据不同的 url 地址展示不同的内容或页面. 后端路由 前端通过不同URL请求后端,后端框架有专门的路由模块用来匹配URL地址,然后根据不同地址和参数调用相关处理程序并返回html页面 ...
- 【面试】前端路由hash和history的区别
- 单页面应用(SPA)前端路由hash 模式 VS history 模式
文章目录 单页面应用(SPA) 前端路由的由来 前端路由 hash 模式 history 模式 hash.history优缺点 单页面应用(SPA) 简单的说 SPA 就是一个WEB项目只有一个 HT ...
- 前端路由: hash history 模式
一. history 模式 history原理: 利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate pushSta ...
- vue3中路由hash与History的设置
1.history 关键字:createWebHistory import { createRouter, createWebHistory } from 'vue-router' const rou ...
- 前端路由实现原理(history)
前端路由实现(history) 了解: HTML5 history新增了两个API:history.pushState和history.replaceState 两个api都接受三个参数 状态对象(s ...
- 教你50行代码实现前端路由小轮子
在SPA应用这么流行的当下,我们看到每个MV**框架都会有自己的路由插件用于实现单页应用的路由设置与监控,并且提供了一系列的生命周期来方便用户,那么到底它们都是怎么做到的呢,今天我会放上自己写的一个小 ...
- c语言实现路由功能,前端路由的两种实现方式,内附详细代码
一.前端路由介绍 前端路由主要应用在SPA(单页面开发)项目中.在无刷新的情况下,根据不同的URL来显示不同的组件或者内容. 前端路由的实现原理 : hash值 + onhashchange事件 hi ...
- 简单的基于hash和hashchange的前端路由
hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...
- 前端路由之hash路由与history路由 Orz
什么是路由 路由这个概念最先是后端出现的.在以前用模板引擎开发页面时,经常会看到这样 http://hometown.xxx.edu.cn/bbs/forum.php 有时还会有带.asp或.html ...
最新文章
- 记住一个道理:只要自己变优秀了,其他的事情才会跟着好起来。
- 汽车之家基于 Flink + Iceberg 的湖仓一体架构实践
- 你活在一个计算机模拟中吗,一麻省理工教授认为,我们更有可能生活在计算机模拟宇宙中...
- java桥_JAVA 桥模式
- X86汇编语言从实模式到保护模式16:特权级和特权级保护
- android与服务器交互总结(json,post,xUtils,Volley)
- 获取ASP.NET MVC中的完整操作URL [重复]
- Pytorch专题实战——逻辑回归(Logistic Regression)
- BurpSuite 设置Hostname Resolution
- sql Server 发送邮件 错误类型及原因
- MacOS Mojave 安装 AI 東北きりたん 东北切蒲英 NEUTRINO 教程
- SOT-23封装对应元器件、管脚分布及其功能示意汇总
- 嵌入式SQLite数据库架构和设计
- 英飞凌电动汽车参考方案,包含原理图,和Bom清单
- Assigning Workstations
- html5弹球游戏的实现,HTML5 Canvas 木板弹球小游戏/碰撞检测和反弹
- iOS RunLoop基础和应用举例
- Pond Cascade Gym - 101670B 解题报告
- 听说蚂蚁金服上市,但是实现财务自由的只是那些架构师?
- 打开谷歌自动翻译功能
热门文章
- 谷歌浏览器如何使用访客模式 谷歌浏览器使用访客模式的方法
- android的大转盘抽奖完美实现
- 内存管理API之get_unmapped_area
- 开源云真机平台-Sonic应用实践
- 【记录】【0】好的博客,待整理
- 如何在word中的图片上画圈标注_教你如何轻松在图片上画圈圈、画箭头、写注释...
- GB2312汉字拼音对照表
- 计算机右键新建显示为空,Win7鼠标右键新建为空这么办 win7电脑右键选项为空白如何解决...
- 仅此一文带您走入智能叮当的世界
- PS自学教程是Ads设计必备 盘点精彩对比式Ads