Nginx与history路由模式：刷新页面404问题

最新推荐文章于 2025-07-09 08:52:20 发布

是席木木啊

最新推荐文章于 2025-07-09 08:52:20 发布

阅读量6.7k

点赞数 30

CC 4.0 BY-SA版权

分类专栏： Java Vue 开源项目文章标签： nginx 前端服务器

本文链接：https://blog.csdn.net/weixin_43524214/article/details/136081303

文章讲述了在使用Nginx部署前端项目时，当路由模式采用history模式，刷新页面可能导致404的问题。介绍了hash模式和history模式的工作原理，并提供了针对history模式下404问题的解决方案，包括使用try_files和alias指令的配置调整。

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

使用nginx部署前端项目，路由模式采用history模式时，刷新页面之后，显示404。

路由模式

前端路由的基本作用为：

①当浏览器地址变化时，切换页面；

②点击浏览器后退、前进按钮时，更新网页内容；

③刷新浏览器页面时，网页加载与当前路由相匹配的内容。

在前端项目开发中，主要使用到两种路由模式：

【1】hash模式：通过监听浏览器地址hash值，在回调函数中切换网页内容/部分内容；

【2】history模式：基于history API自定义url地址，实现url地址变化并保证网页内容的切换。

hash模式

基本原理

使用window.location.hash属性及窗口的onhashchange事件，可以实现监听浏览器地址hash值变化，执行相应的js切换网页。

hash模式的特点如下：

①hash指的是地址中#号以及后面的字符，也称为散列值。hash也称作锚点，本身是用来做页面跳转定位的。如http://localhost/index.html#abc，这里的#abc就是hash；
②散列值是不会随请求发送到服务器端的，所以改变hash，不会重新加载页面；
③ window 的 hashchange 事件作用：当散列值改变时，可以通过 location.hash 来获取和设置hash值；
④location.hash值的变化会直接反应到浏览器地址栏。

hash路由触发条件

那么，如何触发hash路由呢？主要分为编程式触发（例如：通过a标签设置锚点、js代码级动态更新）和手动触发（例如：点击浏览器的前进/后退按钮），

①当浏览器地址栏的散列值/hash值变化时，会自动触发location..hash属性值的变化，从而触发onhashChange事件。

②当只改变浏览器地址栏URL的哈希值时，按下enter键不会导致浏览器向服务器发送请求，此时仅仅是设置hash值，并触发onhashChange事件。

③HTML提供的a标签，通过其href属性可以为页面设置锚点，当点击a标签时，可以跳转到对应元素所在区域，同时更新地址栏hash值（伴随着Location.hash属性值的更新），并触发onhashChange事件。

example-基础示例

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hash模式</title>
    <style>
        .box{
            margin:15px;
            min-height: 100vh;
            width: 100%;
            background-color: skyblue;
        }
    </style>
</head>
<body>

    <div class="box" id="part_1">part_1</div>
    <div class="box" id=