vue 访问 hash 改成 history模式 遇到的一些问题

最新推荐文章于 2024-07-24 14:51:10 发布
最新推荐文章于 2024-07-24 14:51:10 发布
阅读量2k 收藏 1
点赞数
文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37144143/article/details/107442349
版权
在将Vue.js项目路由模式从hash切换到history以满足第三方支付需求时，遇到了js找不到、路由跳转到根路径以及刷新页面显示404等问题。通过修改项目路径配置，并在服务器端进行nginx配置（如try_files $uri $uri/ /h5/shop/index.html），成功解决了404错误，实现了平滑过渡，页面URL更加美观。
摘要由CSDN通过智能技术生成

我用vue 写了一个 手机端商城 用的是 hash 模式访问，一直都挺好用的，但是 由于 项目接入了第三方支付，需要涉及到支付同步跳转，而且要求跳转的url 是 不能带 # ，所以也就不能用has模式了 ，我把路由模式由hash 模式改为history 模式遇到的问题总结一下

我先把mode 改成了 history，因为我的项目路径不是根路径之后遇到了很多问题

const router = new Router({
    mode: 'history',routes });

我的项目路径是：http://retail.company.e9w.me/h5/shop，
http://xxx.com/xx/xx 具体根据你自己的项目路径配置，如果你是根目录下直接放的项目 可能就不会遇到下边的问题

把包之后放

最低0.47元/天 解锁文章
qq_37144143
关注
Vue路由从hash转history模式的实现步骤及后端（koa）的适配方法
Morilence的博客
10-11 1410
Vue路由从hash转history模式的实现步骤及后端（koa）的适配方法一.路由模式更改二.指定静态资源目录三、koa后端适配 一.路由模式更改 更改模式本身倒没什么麻烦事。 router.js: import Vue from 'vue' import Router from 'vue-router' // 其他引入... Vue.use(Router) export default ...
vue vue-Router默认hash模式修改为history需要做的修改详解
10-18
今天小编就为大家分享一篇vue vue-Router默认hash模式修改为history需要做的修改详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2 工程 hash 模式转成 history模式 记录
最新发布
lyx1838102537的博客
07-24 344
vue2 工程 hash 模式转成 history模式
Vue3.0路由将哈希(hash)更改为历史(history)模式
IU
04-03 1403
Vue3.0路由将哈希(hash)更改为历史(history)模式
Vue hash模式改为history模式
1
06-09 1805
如上图所示非常简单,只需要在文件router下的index.js里加上一个mode:'history’即可把hash模式改为history模式.这个时候url上面的#号就不会再存在了,这样就把url成功把hash模式改成history了
vue hash模式切换成history模式
Cynthia_Wiki的博客
10-17 2377
第一步，根据项目情况在router/index.js里修改 mode: 'history', // 放在根目录 base: '/', mode: 'history', // 放在子目录 base: '/子目录名', 第二步，打包配置里，根据项目路径配置情况修改 //子目录 assetsPublicPath: '/子目录名', //根目录 assetsPublicPath: '/...
vue-router 将默认的哈西模式改为history模式
秋来九月八
11-05 3289
主要用于非浏览器环境，如服务器端渲染（SSR）或 Electron 等桌面应用。不涉及浏览器 URL，而是直接操作路由历史栈。});默认情况下，Vue Router 使用哈希模式（Hash Mode），因此如果你不显式指定模式，应用程序将使用哈希路由。根据你的项目需求和服务器配置，你可以选择使用哈希模式或历史模式。当使用历史模式时，请确保服务器正确处理路由，以避免刷新或直接访问 URL 时出现 404 错误。
vue hash模式改成history,同时实现spa预渲染
奇想派
03-01 4115
1.前言 由于公司需要把首页进行seo排名,但是首页已经完成好,并且还是hash模式,要做成seo排名,不能有hash模式的#,同时要能读取到渲染好的页面.所以,针对这2点困难,最终想到的解决方案是: 先hash需要转换为history,保证是无#的美观模式; 需要做到提前渲染好,可以采取vue的SSR,spa预渲染或nuxt.js. 2.选取渲染方式 首先,hash转换为history已......
Vue路由history模式解决404问题的几种方法
12-10
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash...
Vue下路由History模式打包后页面空白的解决方法
12-09
Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 提供了两种主要的路由模式：Hash 模式和 History 模式。这两种模式各有优缺点，适用于不同的应用场景。 Hash 模式是 Vue Router 默认采用的方式，它通过 ...
vue-router 由hash向history模式变迁
SunShinessx的博客
01-30 678
一、概念阐述 对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 为了达到这一目的，浏览器当前提供了以下两种支持： hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。 比如这个 URL：[http://...
VUE项目部署相关问题——hash地址更改为history地址
weixin_44689807的博客
11-29 614
将hash地址更改为history模式，前端需要做的是在router.js里添加mode：history，有时还需要啊添加base，base为文件部署文件路径，此处未用。再将vue.config.js文件里的publicPath:"./"更改为publicPath:"/"，去掉“.”即可。后端需要更改服务器配置，以便更好的显示页面，如果刷新后出现404，则是服务器端未配置好。地址更改好后可能出现数据未响应问题，解决方案见下篇。
vue3 hash 转history 页面空白访问不到资源
qq_24585621的博客
06-16 235
Vue3Hash转history
Vue 的路由模式：hash 模式和 history 模式的区别
小草莓的博客
06-29 573
综上所述，hash 模式适用于简单的前端开发，不需要特殊后端配置，对兼容性要求较高，但在 SEO 方面存在一定的问题。而history 模式则适用于需要更友好的 URL 格式和更好的 SEO 支持的项目，但需要服务器端进行相应的配置。选择哪种模式取决于具体的项目需求和技术要求。
vue-router实现history模式配置（生产环境路由失效跟刷新404问题）
马云
07-27 1385
使用history模式通常本地调试没有什么问题，但是一旦发布到测试或生产环境，则会出现页面白屏或者刷新页面白屏的现象，这种问题的出现是因为前端和服务端没有做相应的配置。location/test-daily表示项目部署在了/test-daily目录下，这里要跟vue.config.js里的publicpath的值保持一致。原文链接https//blog.csdn.net/ZhushiKezhang/article/details/122843264。test-daily是你是项目包名。...
vue-router设置mode为history页面报Cannot Get
qq_29055201的博客
03-29 3062
场景 在开发环境中，觉得通过hash方式访问链接有点奇怪，就想使用history模式，于是在router/index.js设置： import Vue from 'vue' import VueRouter from 'vue-router' import routes from './routes' Vue.use(VueRouter) const router = new VueRouter...
Vue-router的实现原理、hash和history两种模式的区别、history模式部署后刷新报404
muzidigbig的博客
12-12 7942
项目本地运行时候，首页子页面刷新均无问题。部署到服务器之后，刷新页面报错、出现404。 当vue项目的vue-router的mode为history路由模式时，若未进行相应的配置，可能会发生这种情况。 前端路由，即由前端来维护一个路由规则。实现有两种，一种时利用url的hash，也就是常说的锚点(#)，JS通过hashChange事件来监听url的改变，IE7及以下需要轮询；另一种是HTML5的History模式，它使url看起来像普通网站那样，以“/”分割，没有#，但页面并没有跳转，不过使用这种模式需
vue2迁移vue3时遇到的bug
weixin_46182770的博客
03-15 574
在深层级模式时，如果回调函数由于深层级的变更而被触发，那么新值和旧值将是同一个对象。发现在谷歌浏览器中是不执行的，原因是在谷歌浏览器里navigator.geolocation的使用，只能使用 htps协议，普通的htp协议是无法执行的。这句话的意思是，将Css和is不分开打包，CSs将作为内联样式注入到js中，这样install组件后就有样式了。[P in K]的意思是对象的key可以取 string，number，symbol.2.监听多个数据组成的数组，参数的顺序需要和数组中的顺序一致。
Day31_history模式与hash模式
qq_59110215的博客
10-04 446
卷
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值