深入理解 Vue Router 中 Hash 模式 和 History 模式 的核心區(qū)別、底層原理、使用場景及部署注意事項(xiàng)，我會(huì)從「本質(zhì)→原理→實(shí)戰(zhàn)→對比→問題解決」全維度超詳細(xì)講解，結(jié)合你的項(xiàng)目場景（比如之前部署 History 模式報(bào) 404）幫你徹底吃透。

一、先搞懂：前端路由的核心本質(zhì)

Vue 是單頁應(yīng)用（SPA），整個(gè)項(xiàng)目只有一個(gè) index.html 文件。前端路由的核心目的：通過 JavaScript 監(jiān)聽 URL 變化，不刷新頁面的前提下，動(dòng)態(tài)渲染不同的組件，模擬 “多頁面跳轉(zhuǎn)” 的體驗(yàn)（無需向后端發(fā)起新的頁面請求）。

Hash 模式和 History 模式是實(shí)現(xiàn)前端路由的兩種技術(shù)方案，核心差異在于「URL 表現(xiàn)形式」「底層實(shí)現(xiàn)原理」「服務(wù)器部署要求」。

二、Hash 模式（哈希模式）

1. 核心定義

Hash 模式是利用 URL 中 # 后面的「哈希值」實(shí)現(xiàn)路由跳轉(zhuǎn)，# 是瀏覽器的錨點(diǎn)標(biāo)識(shí)，哈希值不會(huì)被發(fā)送到服務(wù)器。

• 示例 URL：http://yourdomain.com/#/proOrder
• 其中 #/proOrder 就是哈希路由，# 后面的內(nèi)容完全由前端控制。

2. 底層實(shí)現(xiàn)原理

（1）核心 API：window.onhashchange

瀏覽器天生支持監(jiān)聽 # 后面內(nèi)容的變化，觸發(fā) hashchange 事件，前端可在該事件中判斷哈希值，渲染對應(yīng)組件：

// 原生 JS 模擬 Hash 路由核心邏輯
window.addEventListener('hashchange', () => {
  // 獲取當(dāng)前哈希值（去掉 #）
  const hash = window.location.hash.slice(1); 
  // 根據(jù)哈希值渲染不同組件
  if (hash === '/proOrder') {
    renderProOrderComponent();
  } else if (hash === '/home') {
    renderHomeComponent();
  }
});

（2）路由跳轉(zhuǎn)的本質(zhì)

• 點(diǎn)擊 <router-link to="/proOrder"> 時(shí)，Vue Router 會(huì)修改 window.location.hash = '#/proOrder'；
• 該操作只會(huì)改變 URL 的哈希部分，不會(huì)觸發(fā)瀏覽器的頁面刷新，也不會(huì)向服務(wù)器發(fā)請求。

3. Vue Router 中配置 Hash 模式

// router/index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [/* 你的路由規(guī)則 */];
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL), // 核心：Hash 模式
  routes
});
export default router;

4. 核心特點(diǎn)（優(yōu)缺點(diǎn)）

三、History 模式（HTML5 歷史模式）

1. 核心定義

History 模式基于 HTML5 新增的 History API 實(shí)現(xiàn)，URL 無 #，和傳統(tǒng)后端路由的 URL 格式一致，哈希值會(huì)被完整發(fā)送到服務(wù)器。

• 示例 URL：http://yourdomain.com/proOrder（和后端路由格式完全一致）
• 該模式是現(xiàn)代前端項(xiàng)目的主流選擇（追求 URL 美觀、SEO 友好）。

2. 底層實(shí)現(xiàn)原理

（1）核心 API：HTML5 History API

• history.pushState(state, title, url)：修改 URL 且不發(fā)送請求，添加一條歷史記錄；
• history.replaceState(state, title, url)：修改 URL 且不發(fā)送請求，替換當(dāng)前歷史記錄；
• window.onpopstate：監(jiān)聽瀏覽器的「回退 / 前進(jìn)」按鈕，觸發(fā)狀態(tài)變化。

（2）路由跳轉(zhuǎn)的本質(zhì)

// 原生 JS 模擬 History 路由核心邏輯
// 點(diǎn)擊跳轉(zhuǎn)按鈕時(shí)
document.querySelector('#toProOrder').addEventListener('click', (e) => {
  e.preventDefault(); // 阻止默認(rèn)a標(biāo)簽跳轉(zhuǎn)
  // 修改 URL 為 /proOrder，不發(fā)請求
  history.pushState({}, '', '/proOrder');
  // 手動(dòng)渲染對應(yīng)組件
  renderProOrderComponent();
});
// 監(jiān)聽回退/前進(jìn)
window.addEventListener('popstate', () => {
  const path = window.location.pathname;
  if (path === '/proOrder') {
    renderProOrderComponent();
  }
});

?? 關(guān)鍵：pushState 只是修改 URL，不會(huì)觸發(fā)頁面刷新，但直接訪問 / 刷新 http://xxx.com/proOrder 時(shí)，瀏覽器會(huì)向服務(wù)器發(fā)送該路徑的請求—— 這也是你之前部署報(bào) 404 的核心原因！

3. Vue Router 中配置 History 模式

// router/index.ts（你的原有配置）
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [/* 你的路由規(guī)則 */];
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // 核心：History 模式
  routes
});
export default router;

4. 核心特點(diǎn)（優(yōu)缺點(diǎn)）

四、Hash 模式 vs History 模式 核心對比表

五、實(shí)戰(zhàn)部署：History 模式解決 404 的核心方案

部署 History 模式報(bào) 404，本質(zhì)是 Nginx 未配置「路由轉(zhuǎn)發(fā)」，以下是不同后端的配置方案：

1. Nginx 配置（最常用，你的場景）

server {
    listen 80;
    server_name 你的域名/服務(wù)器IP;
    root /usr/share/nginx/html/你的項(xiàng)目dist目錄; # 項(xiàng)目打包后的根目錄
    index index.html index.htm;
    # 核心：所有請求轉(zhuǎn)發(fā)到 index.html，由前端路由接管
    location / {
        try_files $uri $uri/ /index.html; # 先找物理文件→找不到就轉(zhuǎn)發(fā)到index.html
        add_header Cache-Control "no-cache, no-store, must-revalidate"; # 避免緩存
    }
    # 靜態(tài)資源緩存（可選，提升加載速度）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 7d;
        add_header Cache-Control "public, max-age=604800";
    }
}

2. Apache 配置

修改 .htaccess 文件（放在項(xiàng)目根目錄）：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

3. Node.js Express 配置

const express = require('express');
const path = require('path');
const app = express();
// 靜態(tài)文件目錄
app.use(express.static(path.join(__dirname, 'dist')));
// 所有路由轉(zhuǎn)發(fā)到 index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});
app.listen(3000, () => {
  console.log('服務(wù)器運(yùn)行在 3000 端口');
});

六、選型建議：什么時(shí)候用 Hash/History？

選 Hash 模式的場景

1. 內(nèi)部管理系統(tǒng)（如你的工單系統(tǒng)）、無需 SEO 的項(xiàng)目；
2. 快速開發(fā)、無法協(xié)調(diào)后端配置服務(wù)器；
3. 需要兼容低版本瀏覽器（如 IE8 及以下）；
4. 臨時(shí)部署、測試環(huán)境（無需復(fù)雜配置）。

選 History 模式的場景

1. 對外展示的官網(wǎng)、需要 SEO 優(yōu)化的項(xiàng)目；
2. 追求 URL 美觀，提升用戶體驗(yàn)；
3. 團(tuán)隊(duì)能協(xié)調(diào)后端修改 Nginx/Apache 配置；
4. 現(xiàn)代瀏覽器環(huán)境（無需兼容低版本 IE）。

七、常見問題 & 解決方案

1. History 模式刷新 404

• 原因：服務(wù)器未配置路由轉(zhuǎn)發(fā)，直接請求 /proOrder 時(shí)找不到對應(yīng)文件；
• 解決：按上文配置 Nginx/Apache，添加 try_files（Nginx）或 Rewrite 規(guī)則（Apache）。

2. Hash 模式 URL 中的 # 影響錨點(diǎn)

問題：頁面內(nèi) <a href="#top">回到頂部</a> 會(huì)被路由攔截；

解決：Vue Router 可配置hashPrefix自定義哈希前綴（如#!）：

const router = createRouter({
  history: createWebHashHistory({ hashPrefix: '!' }), // 哈希前綴改為 #!
  routes
});

此時(shí) URL 為http://xxx.com/#!/proOrder，原生錨點(diǎn)#top不會(huì)沖突。

3. History 模式部署在子路徑（如/vue3-app）

• 問題：部署在 http://xxx.com/vue3-app/proOrder 時(shí)路由失效；
• 解決：
  1. Vite 配置 base: '/vue3-app/'；
  2. 路由配置 createWebHistory(import.meta.env.BASE_URL)；
  3. Nginx 配置 root /usr/share/nginx/html/vue3-app; + try_files $uri $uri/ /vue3-app/index.html;。

總結(jié)（核心關(guān)鍵點(diǎn)）

1. Hash 模式：靠 # 分隔，無需后端配置，兼容性好，URL 帶 #，SEO 差；
2. History 模式：基于 HTML5 API，URL 美觀，SEO 好，但需后端配置路由轉(zhuǎn)發(fā)，否則 404；
3. 選型核心：對內(nèi)系統(tǒng) / 快速開發(fā)用 Hash，對外網(wǎng)站 / 需 SEO 用 History；
4. 你的項(xiàng)目（工單系統(tǒng)）：若無需 SEO，用 Hash 模式可避免 Nginx 配置；若追求 URL 美觀，按上文配置 Nginx 即可解決 404。

到此這篇關(guān)于深入理解 Vue Router 中 Hash 模式和 History 模式 的核心區(qū)別、底層原理、使用場景及部署注意事項(xiàng)的文章就介紹到這了,更多相關(guān)vue router hash和history區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論