Vue路由hash改history模式刷新居然404？

最新推荐文章于 2025-05-15 11:04:34 发布

长安谒故人

最新推荐文章于 2025-05-15 11:04:34 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/mbrains/article/details/128461649

前端专栏收录该内容

1 篇文章

订阅专栏

问题描述

hash模式下所有的路由都会加“#”号，但是新的需求需要去改变请求地址，而hash模式下路由/请求路径都带有“#”号无法正常使用，第一步解决方案是将hash模式改为history，就可以拿到干净的路由随意更改。完成功能后发现刷新页面404，动态路由也是404？

原因分析

hash模式刷新不会把“#”后面的hash值包含在请求中，而history模式刷新后会发起一个实实在在的请求，当后端匹配不到请求地址中的那个接口，前端也找不到之前的静态资源（打包后的index.html文件），就是404

解决办法

1、项目使用nginx部署，作好配置，这个配置的文章很多写的很好

2、动态路由的404，为动态路由在后端写一个通用接口，HTTP刷新发起请求从后端返回一个静态资源，静态资源，内容就是index.html文件内容，不是"index.html",项目更新返回的静态资源也需要更新

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

长安谒故人

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue路由：hash模式下跳转404的问题。

小芳的专栏

06-14

894

3.问题的产生：登录后跳转home首页正常，点击跳转管理层页面（新打开浏览器窗口）。这时管理层页面编写标签：，跳转首页为404。2.首页和登录页在一个动态路由模块，而其他的管理层页面模块在另外一个动态路由模块。1.没有动态加载到home的动态路由，找不到路由，因此跳转404。原因：hash模式跳转后会记录上次浏览器的访问记录。a标签href的跳转换成@click，跳转后强制刷新当前页面。在点击浏览器自带的回退上一步的按钮时候又跳转到404了。

Vue2：路由history模式的项目部署后页面刷新404问题处理

Brave_heart4pzj的博客

03-01

1434

Vue

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

vue 路由history模式刷新页面404问题

lucky_zouzou的博客

10-09

4852

vue项目中路由hash模式改为了history模式,由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器，而history模式下浏览器会直接去服务器找这些地址，导致服务器没有对应的页面地址而报404。增加location配置，与项目中配置的名称一致，try_files 后面的文件名也要与名称一致。前端项目中修改项目的base路径,这里我设置为main。第二步，修改nginx配置。

Vue项目 history模式下刷新出现404问题

最新发布

lichengwei816的博客

05-15

394

2，修改nginx配置。

vue2解决router使用history模式刷新报404问题

qq_40649432的博客

07-12

616

mode改成history后，页面首页访问正常，其他页面刷新报404错误 export default new Router({ mode : 'history', routes: [ { path: '/', name: 'index', component: index }, ] }) 解决：在网站根目录添加.htaccess文件文件内容 <IfModule mod_rewrite.c> RewriteEngine On

VUE项目路由变成history模式刷新页面404

qq_37604998的博客

08-06

2376

刚刚前端将vue项目的路由模式由hash变成了history，刷新项目页面出现404，在官方提供的vue-router文档中讲解了怎么解决这个问题，并且给了配置例子。修改项目域名的Nginx站点conf文件配置，添加下面代码就可以了【修改完配置记得重启下Nginx】 location / { try_files $uri $uri/ /index.html; } 下面是完整的conf文件样子 # 项目域名conf文件 server { listen 80; listen 443 ss

Vue路由history模式解决404问题的几种方法

12-10

但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history...

vue部署后刷新白屏404？前端路由模式详解（hash和history）

hhhhhhhssss的博客

07-12

4021

前言不知道大家有没有遇到过一种情况，当自己的vue部署在服务器上时，一切都如想象办运转，然后脑袋duang的一下，突然想去刷新，然后网页就duang的一下，白屏了。不出意外的话，我猜你用的一定是history的路由模式。没错，这就是history中的一个问题，接下来让我们一起探索一下前端路由吧！一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤 1.引入库代码如下（示例）： import numpy as np impo

VUE的history模式下除了index外其他路由404报错解决办法

12-10

我们先来看下代码： location / { ... root /dist; ... } try_files首先会判断他是文件，还是一个目录，...vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我

Vue 路由的hash模式和history模式有什么区别

qq_30193097的博客

08-08

659

综上所述，hash模式和history模式各有优劣，选择哪种模式取决于具体的应用场景、用户需求和项目的资源。hash模式简单、兼容性强，但URL美观性和SEO较差；history模式则提供了更自然的URL和更好的SEO优化，但需要更多的配置工作和服务器支持。在Vue.js框架中，路由管理是单页面应用（SPA）不可或缺的功能。Vue 路由提供了两种模式：hash模式和history模式，这两种模式主要负责处理URL的变更而无需重新加载整个页面，实现前端路由的功能。尽管它们的基本职责相同，但两者在。

VUE项目部署相关问题——hash地址更改为history地址

weixin_44689807的博客

11-29

873

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

vue项目部署到服务器上路由模式为history时，刷新页面报404的问题

tgy003的博客

03-11

934

如果前面两个都匹配不上的话，就会重写到index.html，因为这个index.html使我们项目的入口，index.html里面会读取当时打包好的js文件，就可以读取到路由配置，以实现我们浏览器的url对应的路由页面。root 你的项目路径 //如果前面没配的话,记得加上，前面配了，这一行可以省略。重启 nginx，然后随意刷新浏览器，再也不会出现404 问题了。因为前面配了root路径,所以下面就可以不加root。在nginx配置文件中添加以下配置项。

项目部署到服务器上，刷新页面报404

weixin_37331593的博客

08-19

3380

原因：项目的路由不是采用hash模式（访问路径中间加#），而是采用了history模式（/A/B）。项目部署后，刷新页面出现404错误，在本地运行则正常。

vue项目刷新404处理方式

m0_71966801的博客

07-16

4616

当使用history模式时，URL中不再带有#号，而是正常的URL路径。这种配置使得在刷新页面时，服务器能够正确地返回主应用文件，并且Vue路由能够根据URL路径加载和呈现相应的组件。配置服务器端：当使用Vue进行单页应用开发时，需要在服务器端进行一些配置以确保在刷新页面时不返回404错误。具体来说，需要配置服务器端路由规则，以便在访问任何URL时都返回主Vue应用的入口文件（通常是index.html）。这样，在页面刷新时，服务器将始终返回主应用文件，并且Vue路由能够正确地加载并渲染相应的组件。

【问题记录】解决vite多页应用路由改用history之后本地刷新404问题

Kuroko's Development Notes

05-30

3623

当前项目是一个多页应用配置，将路由从默认的hash模式改为history模式之后，本地开发环境刷新页面404

vue history模式刷新404

qq_34182649的博客

08-21

485

vue hash模式下，URL中存在’#’，用’history’模式就能解决这个问题。但是history模式会出现刷新页面后，页面出现404。解决的办法是用nginx配置一下。这是在网上查到的，但是我不是用nginx的不知道怎么解决先用回hash模式在这里记录一下以后找到解决办法更新 ...

Vue.js - 使用History模式反向代理Nginx配置404错误

chaishen10000的专栏

06-01

3076

History模式这样不灵了，需要注意两点：#防止刷新出现404错误2、要加"/"结尾配置proxy_pass时，当在后面的url加上了/，相当于是绝对根路径，则nginx不会把location中匹配的路径部分代理走；如果没有/，则会把匹配的路径部分也给代理走（这样配置在Nginx反向代理+负载均衡简单实现（http方式）也提到过）。

history 模式刷新 404 问题解决方法

记录每日学习的知识&技术

01-16

3802

这是因为 history 模式依赖于浏览器的 history.pushState API 来管理路由状态，而刷新页面时浏览器会向服务器发送请求，服务器无法正确地解析这些路由并返回对应的页面，从而导致 404 错误。如果你使用的是基于 Node.js 的服务器（如 Express），需要配置服务器以始终返回 index.html 页面，即使在不存在的路由上也是如此。在 Vue CLI 生成的项目中，Vue Router 的配置通常位于src/router/index.js文件中。

Nginx：vue路由使用history模式刷新404

z69183787的专栏

11-08

3083

在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我们直接在浏览器输入这个地址的时候，就会对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404。只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部的 URL 的指向。当vue-router使用history模式时，当我们刷新页面或直接访问路径的时候就会返回404，如图。使用 Nginx try_files。例子：根据上面的配置，当请求。