Nginx解决history模式下页面刷新404

前置知识

  • 单页应用(SPA - single page application)只在第一次加载页面时,返回唯一的html页面和它的公共静态资源,后续的页面跳转都不会从服务端拿html文件。(hash和history路由实现浏览器url变化而不刷新页面)
  • hash路由例子:www.baidu.com/#/home, 原本hash是用来结合锚点实现页面试图的控制,当#后面的值发生改变时不会重新请求页面,主要通过window的onhashchange方法来实现。
  • history路由相比于hash路由,最直观的变化就是路由中没有#,通过调用window.history对象上的一系列方法来实现页面的无刷新跳转(pushState、replaceState)。

history模式下,因为url改变了,此时如果手动刷新页面,浏览器认为是请求一个新的页面(发起新的Http请求),而新的页面是不存在的(后端未配置的话),导致404。先简述一下在浏览器上输入IP或域名后发生的事情(有点面试题的味道了嗷🥴),按下回车之后,浏览器发出的http去请求html文件,在通过一系列的转发和寻址解析后,被目标IP所在服务器上的80端口(默认)接收,这个时候,问题来了哈,服务器的80接口拿到Http请求后,它不知道要去返回什么,这个

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 路由的 history 模式下,刷新页面会导致 404 错误的出现,这是因为浏览器会向服务器发送请求,但服务器并没有对应的路由,因此就会返回 404 错误。解决这个问题的方法有两种: 1. 配置后端服务器 如果你的 Vue 项目部署在 Apache 或 Nginx 等 Web 服务器上,你可以配置服务器来处理这个问题。具体做法是,在服务器上配置一个重定向规则,将所有的 URL 请求都重定向到 index.html 文件上。以 Apache 服务器为例,可以在 Apache 的配置文件(如 httpd.conf)中添加以下规则: ``` <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> ``` 这个配置将所有的 URL 请求都重定向到 index.html 文件上,这样即使刷新页面,服务器也会返回正确的内容。 2. 使用 hash 模式 如果你不想在服务器上配置重定向规则,你可以考虑使用 hash 模式。在 hash 模式下,Vue 会使用 URL 中的 # 符号来表示路由,这样即使刷新页面,浏览器也只会重新加载 index.html 文件,而不会向服务器发送请求。要启用 hash 模式,只需要在 Vue 路由的配置中添加以下代码: ``` const router = new VueRouter({ mode: 'hash', routes: [...] }) ``` 这样就可以启用 hash 模式了。需要注意的是,hash 模式下,URL 中的 # 符号后面的内容不会被发送到服务器,因此你需要在前端代码中使用 JavaScript 来解析 URL 中的 hash 值,并根据这个值来渲染不同的页面

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值