引言

Vue router給我們提供了兩種路由模式，分別是hash模式和history模式。其中預設是使用hash模式，即URL中帶有一個#符號，但是處於業務或個人喜愛的差別，Vue router也提供了history模式。但是由於Vue是單頁SPA應用，所以每個路由並沒有對應的html檔案。

什麼是history模式

history模式特點

history模式使用瀏覽器的history API來管理路由狀態，而不是依賴於URL中的雜湊。
在history模式下，URL看起來更加整潔，沒有#符號。例如，http://example.com/user/profile。
history模式可以在不重新整理整個頁面的情況下，通過改變URL來切換頁面，實現更加流暢的使用者體驗

history模式的優缺點

優點：

更友好的URL：history模式下的URL看起來更加整潔，沒有特殊字元（如#），給使用者提供了更好的閱讀體驗。
無重新整理頁面切換：使用history模式時，頁面切換不會導致整個頁面的重新整理，僅僅改變URL，從而實現更加流暢的使用者體驗。
更好的SEO：搜尋引擎對於history模式下的頁面更容易進行抓取和索引，因為URL更加直觀、語意化。
路由傳參更方便：相比hash模式的URL傳參，history模式下的傳參更加直觀簡潔，引數可以直接通過URL的路徑進行表示。

缺點：

伺服器設定要求：使用history模式需要伺服器的支援，因為URL改變時，要確保伺服器能正確地展示相應的頁面，需要進行一些額外的伺服器設定。
相容性問題：history模式在一些舊版本的瀏覽器（如IE9及以下）中不被支援，如果要相容這些瀏覽器，可能需要降級為hash模式。
開發環境要求：當使用history模式時，需要在開發環境中設定一個伺服器來模擬URL的請求，以確保路由正常執行，相比hash模式需要更多的設定。

如何設定Vue Router使用history模式

- 首先我們需要建立一個Vue專案
- 安裝Vue Router

npm i vue-router

- 在Vue專案中設定Vue Router使用history模式

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    // 路由設定
  ]
});

export default router;

伺服器設定
- 設定伺服器，使得所有路由的URL都指向入口頁面，我們用nginx設定舉例：

server {
  listen 80;
  server_name your_domain.com;
  root /path/to/your/vue_app/dist;
  index index.html;
  location / {
    try_files $uri $uri/ /index.html;
  }
}

# 在以上設定中，需要進行以下調整：
# 1. server_name：將your_domain.com替換為您的域名。
# 2. root：將/path/to/your/vue_app/dist替換為您的Vue應用的編譯輸出目錄。
# 3. index：確保index.html是您的Vue應用的入口頁面。

# 設定解釋：
# • location /：此處表示對所有的請求都生效。
# • try_files $uri $uri/ /index.html：當請求的檔案或目錄不存在時，將請求重定向到index.html。這使得所有的路由請求都指向了Vue應用的入口頁面，使得應用能夠正確地處理動態路由。

處理404頁面

// 在路由設定中定義一個名為NotFound的路由
const routes = [
  // 其他路由設定...
  { path: '/404', name: 'NotFound', component: NotFoundComponent },
  { path: '*', redirect: '/404' }
]

// 建立Vue Router範例並將路由設定應用於它
const router = new VueRouter({
  mode: 'history',
  routes
})

// 導航守衛用於捕獲404錯誤
router.beforeEach((to, from, next) => {
  // 如果目標路由不存在，重定向到404頁面
  if (to.matched.length === 0) {
    next('/404');
  } else {
    next();
  }
})

設定publicPath

如果你希望你的Vue應用打完包以後，所有路由的字首都加上/v1/test，那麼你需要對原有的設定做一下修改

vue.config.js

publicPath這裡需要判斷一下是否為生產環境，如果是生產環境，我們需要加上字首，這樣在讀取js、css等檔案時才能存取到正確的路徑。如果是開發環境，基本URL設定為'/'即可。在開發環境中，我們的應用通常執行在一個原生的開發伺服器上（例如：localhost:8080），而不是真實的生產環境伺服器（例如：https://www.example.com）。因此，'/'可以作為根路徑來存取我們的應用，而不需要新增任何字首。

module.exports = {
  // 部署應用包的基本URL
  publicPath: process.env.NODE_ENV === 'production' ? '/v1/test/' : '/',
  devServer: {
    port: 8080,
    open: true,
    proxy: {}
  }
}

nginx設定

server {
  listen 80;
  server_name your_domain.com;
  root /path/to/your/vue_app/dist;
  index index.html;
  location /v1/test { # 這裡location需要加上/v1/test
    try_files $uri $uri/ /index.html;
  }
}

介紹Vue router的history模式以及如何設定history模式

引言