核心概覽

在 Vue.js 單頁應(yīng)用（SPA）中，vue-router 提供了三種不同的 歷史模式 來管理路由導(dǎo)航和 URL 顯示方式。每種模式適用于不同場景，理解其原理與配置是構(gòu)建現(xiàn)代前端應(yīng)用的關(guān)鍵。

一、Hash 模式（哈希模式）

基本概念

• 利用 URL 中的 # 后面的部分（即 hash）來模擬頁面跳轉(zhuǎn)。
• 瀏覽器不會(huì)將 # 后的內(nèi)容發(fā)送到服務(wù)器，因此無需后端支持。

示例代碼

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
})

訪問地址如：https://example.com/#/home

優(yōu)點(diǎn)

• 兼容老版本瀏覽器（IE9+）
• 無需服務(wù)器額外配置
• 開發(fā)調(diào)試方便

缺點(diǎn)

• URL 不美觀，帶有 #
• 對 SEO 不友好（搜索引擎可能忽略 hash 內(nèi)容）

二、HTML5 模式（瀏覽器歷史記錄模式）

 基本概念

使用 HTML5 的 history.pushState() API 實(shí)現(xiàn)真實(shí)的 URL 路徑。

URL 更加“正常”，例如：https://example.com/user/123

示例代碼

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/user/:id', component: UserComponent }
  ]
})

關(guān)鍵問題：404 錯(cuò)誤

當(dāng)用戶直接訪問 /user/123 時(shí)，請求會(huì)發(fā)送給服務(wù)器。如果服務(wù)器沒有對應(yīng)資源，則返回 404。

解決方案：Fallback 回退機(jī)制

所有非靜態(tài)資源請求都應(yīng)返回 index.html，交由前端路由處理。

常見服務(wù)器配置示例：

服務(wù)器：nginx

配置方法

location / {
  try_files $uri $uri/ /index.html;
}

Apache 

| Express (Node.js) | 使用中間件：

const history = require('connect-history-api-fallback');
app.use(history());

| Firebase Hosting | 在 firebase.json 添加：

{
  "hosting": {
    "rewrites": [
      { "source": "**", "destination": "/index.html" }
    ]
  }
}

| Netlify | 創(chuàng)建 _redirects 文件：

/* /index.html 200

| Vercel | 創(chuàng)建 vercel.json：

{ "rewrites": [{ "source": "/:path*", "destination": "/index.html" }] }

優(yōu)點(diǎn)

• URL 美觀，符合現(xiàn)代 Web 標(biāo)準(zhǔn)
• 利于 SEO 優(yōu)化
• 用戶體驗(yàn)更自然

缺點(diǎn)

• 必須配合服務(wù)器正確配置
• 配置不當(dāng)會(huì)導(dǎo)致 404

三、Memory 模式（內(nèi)存模式）

基本概念

將路由狀態(tài)保存在內(nèi)存中，不依賴瀏覽器的 URL 或歷史棧。

完全由 JavaScript 控制導(dǎo)航。

示例代碼

import { createRouter, createMemoryHistory } from 'vue-router'

const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    { path: '/login', component: LoginComponent }
  ]
})

// 手動(dòng)觸發(fā)初始導(dǎo)航（必須?。?
router.push('/login')

適用場景

• 服務(wù)端渲染（SSR）
• Node.js 后端環(huán)境
• 單元測試或自動(dòng)化腳本
• 移動(dòng)端 WebView 或 Electron 應(yīng)用（可選）

注意事項(xiàng)

• 瀏覽器中無法使用前進(jìn)/后退按鈕
• 頁面刷新后路由狀態(tài)丟失
• URL 不更新，不利于分享

補(bǔ)充知識點(diǎn)：處理 404 頁面

由于 HTML5 模式下所有路徑都被重定向到 index.html，服務(wù)器不再返回 404，因此需要在前端實(shí)現(xiàn)通用匹配路由。

前端萬能路由配置

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  // 通配符路由必須放在最后
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFoundComponent }
]

也可以解構(gòu)參數(shù)：

// 訪問 /not-found 時(shí)
this.$route.params.pathMatch // "not-found"

更佳實(shí)踐（SSR 場景）

在服務(wù)端預(yù)先用路由器匹配 URL：

• 匹配成功 → 渲染頁面
• 匹配失敗 → 返回 HTTP 404 狀態(tài)碼

查看 Vue SSR 文檔 獲取更多細(xì)節(jié)。

對比圖表：三種歷史模式一覽表

知識點(diǎn)詳解

下列為解決上述內(nèi)容所涉及的核心知識點(diǎn)：

1.HTML5 History API

通過 $window.history.pushState() 動(dòng)態(tài)修改 URL 而不刷新頁面，是實(shí)現(xiàn) HTML5 模式的基礎(chǔ)。它允許 SPA 擁有“真實(shí)”路徑。

2.URL 重寫與回退機(jī)制

服務(wù)器需配置將所有未命中靜態(tài)資源的請求指向 index.html，從而交由前端路由處理，避免 404 錯(cuò)誤。

3.通配符路由匹配

使用 /:pathMatch(.*)* 捕獲任意未知路徑，在前端展示 404 頁面，彌補(bǔ)服務(wù)器回退帶來的錯(cuò)誤掩蓋問題。

總結(jié)建議

附加提示

若部署在子目錄（如 /my-app/），記得設(shè)置 base: '/my-app/'：

const router = createRouter({
  history: createWebHistory('/my-app/'),
  routes: [...]
})

構(gòu)建工具（Vue CLI / Vite / Nuxt）通常已集成相關(guān)插件，但仍需手動(dòng)配置服務(wù)器規(guī)則。

使用 CI/CD 部署時(shí)，確保 _redirects 或 vercel.json 等文件包含在構(gòu)建輸出中。

到此這篇關(guān)于Vue Router的三種歷史模式應(yīng)用與對比詳解的文章就介紹到這了,更多相關(guān)Vue Router歷史模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論