vue router路由模式 hash改为history 对应配置

最新推荐文章于 2023-11-29 10:45:55 发布

yangqii

最新推荐文章于 2023-11-29 10:45:55 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yangqii/article/details/115251535

本文详细指导了如何在Vue CLI 4.x项目中，针对router配置、vue.config.js中publicPath修改及index.html路径调整，解决在history模式下页面刷新404的问题，包括参考的相关解决方案和配置步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本地项目运行下对应修改配置：

1.router 配置文件index.js

2.vue.config.js (vue cli4.x) publicPath属性 "./" 改为“/” （对应报错：页面404）

3.index.html 中调用的文件路径采用绝对路径‘/’，相对路径下页面刷新页面会出错

参考文章：

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

解决vue router使用history模式带参数刷新报错

vue-cli 3.x 如何配置assetsPublicPath； vue.config.js如何更改assetsPublicPath配置；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yangqii

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

history路由模式-熟悉两种路由模式

weixin_57334089的博客

10-28

5775

目标了解两种单页应用的路由模式，清楚它们的区别两种单页应用的路由模式 hash模式 hash模式：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号 hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题 hash模式示例: http://localhost:8080/#/home http://localhost:8080/#/user 原理： hashChange history模

vue修改为history模式

追梦小狂魔的博客

03-31

1760

注意事项 new VueRouter的{}里面写 const router = new VueRouter({ mode: 'history', routes }) 这样丑陋的#就消失了

参与评论您还未登录，请先登录后发表或查看评论

路由hash模式改成history模式的前端vue配置与后端配置

WanweI897的博客

01-06

4485

Web/static/ 表示项目部署路径，每个人的路径不一样，vue默认路径是根路径/，如果你项目不是部署在根路径，那就需要修改一些配置。history模式需要后端配合，具体的后端配置可以在网上找到，方法是获取不到资源时将url重写到 /index.html。特别注意的是，如果你的项目没有部署在根路径，那么你需要写入完整路径，例如 /Web/static/index.html。1.配置路由history模式并配置base。index.html 表示项目入口文件。/index 表示项目首页的路由地址。

Vue下路由History模式打包后页面空白

weixin_34232617的博客

07-02

799

vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息.这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了...

vue项目切换为history模式后出错

qq_42969437的博客

08-28

1278

如此设置即可

vue路由从hash模式切换到history模式

weixin_45018314的博客

07-16

1879

由于微信登录的限制不得不把hash模式更换为history模式 vue-router 在router.js下增加mode字段，如果部署环境不为根目录，需要添加base属性，填写服务器的路径（.com后路径） home/index为vue-router中路由打包路径也需要修改为对应的前缀，否则访问不到对应的资源 vue.config.jsz 注意！！！！！！：base值路径两侧必须加 / ...

vue-router中的hash和history两种模式的区别

10-18

Vue-router支持两种路由模式，分别是hash模式和history模式。下面详细解释这两种模式的区别。 ### hash模式 hash模式是早期基于浏览器历史记录管理的前端路由模式。它利用了URL中的hash（即URL中的#符号）的变化来...

vue vue-Router默认hash模式修改为history需要做的修改详解

10-18

要将 Vue Router 的模式从 Hash 更改为 History，首先在 `router/index.js` 文件中找到 `createRouter` 或类似的初始化配置，将 `mode` 属性改为 `history`： ```javascript const router = new Router({ mode:...

一文了解vue-router之hash模式和history模式

10-16

本文的主题是关于Vue.js中用于前端路由管理的库vue-router的两种路由模式：hash模式和history模式。它们是vue-router提供的两种主要的导航方式，各有特点，适用于不同的场景和需求。首先，让我们详细了解一下hash...

Vue-router 中hash模式和history模式的区别

12-10

Vue-router 中hash模式和history模式的关系在vue的路由配置中有mode选项最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:”hash”; mode:”history”; hash模式和history模式的...

vue的history模式，页面刷新404，以及引入得第三方插件或者JS路径错误的解决办法

WebDestiny的博客

09-02

7459

在解决问题之前先让我们了解下vue中的hash模式和history模式： vue中的hash模式： hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = lo...

vue vue-Router默认hash模式修改为history需要做的修改

最新发布

weixin_44689807的博客

11-29

875

将hash地址更改为history模式，前端需要做的是在router.js里添加mode：history，有时还需要啊添加base，base为文件部署文件路径，此处未用。再将vue.config.js文件里的publicPath:"./"更改为publicPath:"/"，去掉“.”即可。后端需要更改服务器配置，以便更好的显示页面，如果刷新后出现404，则是服务器端未配置好。地址更改好后可能出现数据未响应问题，解决方案见下篇。

vue默认路由改成history 模式和后端路由统一 nuxt 就是这样做的

gwdgwd123的博客

06-27

3336

vue 路由history模式 2018-07-25 14:47:00weixin_34409822阅读数16 vue路由的模式默认是hash的，url上会带有#号，路由在#号后面如：http://api.51app.cn/gamepage/index.html#/index 在百度统计的时候把#后面的去掉了，就没有统计到具体的页面，并且这样很不美观，希望改成这样http://api....

vue-router路由使用 history 模式时，后端如何配置

wenmin1987的博客

07-16

2万+

官网配置：不同服务器参考---mode: 'history', https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90 1.后端SpringBoot如何配置：当我们使用Vue开发时，一般会用到vue-rou...

Vue hash模式改为history模式

06-09

1877

如上图所示非常简单,只需要在文件router下的index.js里加上一个mode:'history’即可把hash模式改为history模式.这个时候url上面的#号就不会再存在了,这样就把url成功把hash模式改成history了

如何优雅的使用 Vue Router History 模式

DMS程序猿

07-05

6682

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 —— Vue Router 官网为啥要使用 History 模式还能有什么原因，hash 模式的 # 不好看呗，当然了，我们也不能仅仅只看颜值，还有一些其他原因，例如 hash 模式下对一些需要锚点功能的需求会和他的路由...

VUE 配置history路由模式配置

yh4494的博客

04-07

4611

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！不过这种模式要玩好，还需要后台配置支持。

前端路由解析：Vue-Router的Hash与History模式

"本文主要介绍了前端路由的两种主要实现方式：Hash路由和History路由，并探讨了它们的工作原理以及如何在实际应用中实现简单的前端路由。文章还提到了Vue.js框架中的vue-router，作为实现前端路由的工具。" 前端...