vue-router history 模式页面刷新出现404

最新推荐文章于 2024-01-16 11:50:34 发布
原创 最新推荐文章于 2024-01-16 11:50:34 发布 · 252 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文详细解析了Nginx配置中`location`块内的`try_files`指令，它用于指定服务器如何查找并处理请求的静态资源。通过`try_files $uri $uri/ /index.html;`，服务器会首先尝试匹配请求的URI，如果找不到，则查找URI加上斜杠，最后如果依然未找到，则返回`index.html`，实现SPA应用的路由管理。

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

nginx配置：location / { try_files $uri $uri/ /index.html; }

部署问题-Vue Router在history模式下刷新页面404问题
yaoson的博客
09-21 3639
（2）History：原理是利用了h5的Interface 中的pushState()方法和replaceState()方法，它们提供了对浏览器历史记录进行修改的功能，但当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。在正式服务器中，将本文中的相应解决问题的代码配置到Nginx下配置SSL证书的443端口的serve下面；（1）SSL证书：（标记有“需要修改”字样的地方，是需要替换成你自己的配置）（标记有“需要修改”字样的地方，是需要替换成你自己的配置）请根据当前环境配置；
在使用vue router把模式改成history时，刷新404问题解决方案
Allen-Ye博客
04-03 3167
如果我们在这边模式是用history，部署到ng上面就第一次页面不会出现问题，刷新页面就会出现404，有以下解决方案 方案一 （这种方式容易被第三方劫持） location /{ root /data/nginx/html; index index.html index.htm; error_page 404 /index.html; } ...
解决vue router使用 history 模式刷新后404问题
12-09
因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。 想要history模式正常访问，还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 也就是在服务端修改404错误页面的配置路径，让其指向到index.html。 警告： 因为这么做以后，你的服务器就不再返回 404 错误页面
vue-router刷新页面显示404
believet93的博客
06-12 1864
参考：https://blog.youkuaiyun.com/u011025083/article/details/80352301
vue-router history 404 问题
Drizzlejj的博客
01-13 615
默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。但是会有一个 # 号。 http://localhost:8080/#/films/hotplaying 就没有 # 号了。 不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问就会返回 404，这就不好看了。 所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，
vue-router启用history模式下的开发及非根目录部署方法
10-17
当使用Vue-Router时，可以选择不同的路由模式，其中最常用的两种模式是hash模式和history模式。本文将详细介绍如何在启用history模式下进行开发，并在非根目录下部署Vue应用。 ### 前端路由的必要性 在传统的多...
一文了解vue-router之hash模式和history模式
10-16
本文的主题是关于Vue.js中用于前端路由管理的库vue-router的两种路由模式：hash模式和history模式。它们是vue-router提供的两种主要的导航方式，各有特点，适用于不同的场景和需求。 首先，让我们详细了解一下hash...
vue-router路由参数刷新消失的问题解决方法
01-21
场景：vue-router实现的单页应用，登录页调用登录接口后，服务器返回用户信息，然后通过router.push({name: ‘index’, params: res.data})传给主页组件，并在主页显示数据。但是刷新页面后，数据就消失了。 解决...
vue-router history模式下的微信分享小结
08-27
vue-router history模式是一种基于浏览器的history API实现的客户端路由模式，它可以让我们在不刷新页面的情况下实现页面之间的跳转。 在使用vue-router history模式时，我们可能会遇到微信分享的问题。微信分享是...
解决Vue中使用history路由模式出现404的问题
NetRookieX的博客
11-21 8883
背景 vue中默认的路由模式是hash，会出现烦人的符号#，如http://127.0.0.1/#/。 改为history模式可以解决这个问题，但是有一个坑是：强刷新、回退等操作会出现404。 Vue改用History路由模式 修改src/router/index.js export default new Router({ mode: 'history', //改为history模式 routes: [ { path: '/pub', component:Emp
react-router browserHistory刷新页面404问题解决方法
08-28
本篇文章主要介绍了react-router browserHistory刷新页面404问题解决方法，非常具有实用价值，需要的朋友可以参考下
vue router history模式 线上nginx部署 刷新页面导致404
码农老牛
05-29 1043
在 Vue router 中使用 history 模式时，刷新页面可能会导致 404 错误。这是因为在 history 模式下，Vue 路由器通过修改浏览器的历史记录来实现路由切换，但是当用户直接访问某个 URL 时，服务器端没有相应的处理逻辑，于是就会返回 404。上述配置将尝试查找请求的 URI 文件，如果找不到，则尝试查找以该 URI 开头的文件夹，如果还找不到则返回 index.html，使应用程序可以正确加载并处理该路由。
history 模式刷新 404 问题解决方法
最新发布
记录每日学习的知识&技术
01-16 3807
这是因为 history 模式依赖于浏览器的 history.pushState API 来管理路由状态，而刷新页面时浏览器会向服务器发送请求，服务器无法正确地解析这些路由并返回对应的页面，从而导致 404 错误。如果你使用的是基于 Node.js 的服务器（如 Express），需要配置服务器以始终返回 index.html 页面，即使在不存在的路由上也是如此。在 Vue CLI 生成的项目中，Vue Router 的配置通常位于src/router/index.js文件中。
完美解决vue在路由history模式下打包刷新报404（nginx）
a1983029606的博客
10-13 4161
history模式的配置方法 我们来看看官方文档是教我们怎么配置的：HTML5 History 模式。 首先要将mode设置为history： const router = new VueRouter({ mode: 'history', routes: [...] }) nginx location / { try_files $uri $uri/ /index.html; } 然后就没了... 这里我们需要清楚为什么会报404： 我们用nginx部署项目，然后在地址栏..
vue项目history模式刷新404问题
FGGIT的博客
02-01 7002
vue项目history模式刷新404问题
解决vue-router使用 history 模式刷新后404问题
weixin_46852620的博客
02-01 1379
因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。 想要history模式正常访问，还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 也就是在服务端修改404错误页面的配置路径，让其指向
鼠标悬停在一个元素上改变另一个元素的样式
热门推荐
AiTingYan的博客
04-24 1万+
1.A元素是B元素的父级 A:hover B{ //鼠标经过A元素时，B元素背景会变成黑色 background:#000; } 2.A元素与B元素相邻且A紧接着B A:hover +B { //鼠标经过A元素时，B元素背景会变成黑色 background:#000; } ...
Express与Vue-router history模式踩坑指南
这样，无论是首次访问还是直接访问history模式的URL，服务器都会返回同一个页面，由Vue-Router处理后续的路由逻辑。 此外，为了确保在部署到生产环境时，服务器能正确处理404错误，你可能还需要配置服务器进行全局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值