vue前端 router路由hash和history模式区别

vue-router路由有两种方式,hash模式和history模式,接下来浅谈一下两者区别

|---------|-------------------------|------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 模式 | 通俗解释 | 兼容 | 原理 |
| hash | url尾巴后的#号及后面的字符都是hash模式 | 兼容IE8及以上 | 于 hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件(hashchange只能改变 # 后面的url片段);虽然hash路径出现在URL中,但是不会出现在HTTP请求中,对后端完全没有影响,因此改变hash值不会重新加载页面,基本都是使用 hash 来实现前端路由的。 ------------------------------------------------ 版权声明:本文为CSDN博主「爱笑的小宇宙」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/wangningjing87/article/details/100982120/ |
| history | history没有带# | 兼容到 IE10以上 | history模式URL就要和后端进行一致,所以要改为history也需要后端的配合,否则会报错 |
| 区别 | 1、hash模式每次刷新页面时是直接更改"#"后的东西,地址不变。 2、history每次刷新会重新像后端请求整个网址,也就是重新请求服务器。如果后端没有及时响应,就会报错404!。history的好处是可以进行修改历史记录,并且不会立刻像后端发起请求。 3、不过如果对于项目没有硬性标准要求,建议直接使用hash模式开发。 |||

相关推荐
码客前端2 分钟前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3
Komorebi゛2 分钟前
【CSS】圆锥渐变流光效果边框样式实现
前端·css
工藤学编程15 分钟前
零基础学AI大模型之CoT思维链和ReAct推理行动
前端·人工智能·react.js
徐同保15 分钟前
上传文件,在前端用 pdf.js 提取 上传的pdf文件中的图片
前端·javascript·pdf
怕浪猫16 分钟前
React从入门到出门第四章 组件通讯与全局状态管理
前端·javascript·react.js
内存不泄露22 分钟前
基于Spring Boot和Vue 3的智能心理健康咨询平台设计与实现
vue.js·spring boot·后端
欧阳天风24 分钟前
用setTimeout代替setInterval
开发语言·前端·javascript
CSDN_RTKLIB26 分钟前
【std::map】与std::unordered_map差异
算法·stl·哈希算法
EndingCoder27 分钟前
箭头函数和 this 绑定
linux·前端·javascript·typescript
郑州光合科技余经理28 分钟前
架构解析:同城本地生活服务o2o平台海外版
大数据·开发语言·前端·人工智能·架构·php·生活