【前端笔记】Vue2中路由history和hash模式的区别

最新推荐文章于 2024-03-09 15:41:18 发布
最新推荐文章于 2024-03-09 15:41:18 发布
阅读量402 收藏
点赞数 1
分类专栏： Vue 前端面试题 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43398736/article/details/126786312
版权
前端 同时被 3 个专栏收录
25 篇文章 0 订阅
订阅专栏
前端面试题
11 篇文章 1 订阅
订阅专栏
Vue
2 篇文章 0 订阅
订阅专栏

history模式

  • history模式url干净无/#/特殊标志
  • 路由通过history.pushState等API来进行切换的
  • 兼容性差，是使用H5新增的history.pushState等API修改url的
  • 应用部署上线后需要后端支持解决页面刷新404的问题

hash模式

  • 地址栏中带有特殊的#标志
  • 路由是通过监听hashChange事件来进行切换的
  • 兼容性比history模式好
  • #后的内容不会包含在http请求中

history模式出现线上刷新页面404的原因

在前端进行页面访问时，浏览器会发起http请求获取当前页面的资源。因为项目是通过路由跳转的，webpack帮忙处理了这种情况。但在生产环境中没有这些配置，当我们访问/xxxx/xxx时，浏览器会去请求下载这个url的资源，但是实际并不存在这个url的资源，所以就会出现404的现象

于离别之朝束起约定之花
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一文了解vue-router之hash模式和history模式
10-16
主要介绍了一文了解vue-router之hash模式和history模式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
区分vue-router的hash和history模式
10-14
Vue Router 是 Vue.js 应用中的官方路由库，它提供了两种模式：hash 和 history，用于管理SPA（单页面应用）的路由。理解这两种模式的区别对于优化用户体验和避免潜在的技术问题至关重要。 **一、hash模式** 在...
vue中两种history和hash模式的使用
关注最新技术问题并持续维护更新
11-26 5589
vue2.0中的history和hash模式     1. history模式 import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); const router = new Router({ mode: 'history', routes: [ { path: '/', name: '', component: '' } ] })     2. hash模式 import Vue f
vue-router两种模式:hash模式和history模式
ai_feng123的博客
11-25 848
1. hash模式（vue-router默认hash模式） hash模式背后的原理是onhashchange事件。 window.onhashchange=function(){ let hash=location.hash.slice(1); document.body.style.color=hash; } （localtion是js里管理地址栏的内置对象，是window对象的一部分，可...
Vue 2学习（路由、history 和 hash 模式、）-day014
javaxueba的博客
11-13 181
路由（route）就是一组key-value的对应关系多个路由，需要经过路由器（router）的管理在 Vue 中也有路由，Vue 中的路由主要是通过 vue-rounter 这个插件库来实现，它的作用就是专门用来实现 SPA 应用的。单页 Web 应用（single page web application，SPA）整个应用只有一个完整的页面点击页面中的导航链接不会刷新页面，只会做页面的局部更新数据需要通过 Ajax 请求获取。
Vue2中Hash和History路由模式的深入解析
最新发布
CRMEB小程序商城的博客
03-09 1110
路由有两种模式：一种是hash模式、另一种是history模式，在使用vue-cli以及vue-router默认搭建的Vue项目，若不做特殊的配置，默认就是hash模式。
Vue2：路由的两种模式history模式和hash模式
Brave_heart4pzj的博客
03-01 896
Vue
vue-router中的hash和history两种模式的区别
10-18
大家都知道vue-router有两种模式，hash模式和history模式，这里来谈谈vue-router中的hash和history两种模式的区别。感兴趣的朋友一起看看吧
Vue-router 中hash模式和history模式的区别
12-10
Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:”hash”;  mode:”history”;  hash模式和history模式的...
介绍Vue router的history模式以及如何配置history模式
m0_62396648的博客
07-08 7922
history模式使用浏览器的history API来管理路由状态，而不是依赖于URL中的哈希。在history模式下，URL看起来更加整洁，没有#符号。例如，history模式可以在不刷新整个页面的情况下，通过改变URL来切换页面，实现更加流畅的用户体验。
Vue版本2+模拟VueRouter的history模式
05-06 537
还有一个 router-view 的报错先不用管，是没定义 router-view 组件。注意这里只是模拟一下原理，里边还有其他的条条框框的限制判断等等其他处理就不完善了。1、修改配置，新增 vue.config.js 配置文件，修改。2、将 template 换成 render。
Vue2 VueRouter 路由配置（并设置为history模式，去除#）
HumorChen的博客
06-14 2723
【代码】Vue2 VueRouter 路由配置（并设置为history模式，去除#）
Vue2进阶篇-路由守卫（全局、独享、组件内路由守卫）、路由的history模式和hash模式
大脑不能为空
07-06 568
Vue的权限控制-路由守卫的使用，以及路由的两种模式讲解。
vue 二级目录配置history
coding
12-30 243
【代码】vue 二级目录配置history。
vue2.0 路由模式mode="history"的作用
weixin_43550562的博客
05-29 174
特别提醒：开启mode="history"模式，需要服务端的支持，因为出现“刷新页面报错404”的问题； 大家都知道，路由地址都是以"#"形式展示，但是有些时候，我们又希望路由地址中不出现"#"，那怎么办呢？ vue给我们提供了一个属性mode="history";代码如下 const router = new Router({ mode: 'history', /...
vue2路由history模式下部署到服务端刷新404 bug解决
qq_43198727的博客
07-22 866
vue2路由history模式下部署到服务端刷新404 bug解决
关于vue2.0项目路由的hash和history遇到的问题
qq_36877078的博客
09-18 311
2、使用history路由模式，打包后在本地通过http-server测试时有时会发现，除了默认的home页外，其他页面都报404，此时可以尝试把history模式去掉后来测试。如果是线上环境，需要后端配合修改配置。1、使用history路由模式，必须设置base参数。
【vue-router】关于在vue2使用vue-router的hash模式与history模式对引入图片资源的影响以及解决方案
菜菜的博客
07-24 636
图片资源引入问题解决方案
vue-router中history模式与hash模式的使用及比对
weixin_45821809的博客
04-05 1240
hash和history如果使用hash模式，一般无需特殊配置；但如果要使用history模式，则前端和服务端要做一定的设置；使用history模式通常本地调试没有什么问题，但是一旦发布到测试或生产环境，则会出现页面白屏或者刷新页面白屏的现象，这种问题的出现是因为前端和服务端没有做相应的配置。
vue中的hash模式和history模式有什么区别
07-11
在Vue中，路由有两种模式：hash模式和history模式。 1. Hash模式： - URL中使用`#`符号，后面跟着路由路径。 - 例如：`http://example.com/#/home` - Hash模式不会向服务器发送请求，所有的路由都在客户端进行处理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值