Vue Router 不同的歷史記錄模式

不同的歷史記錄模式

不同的歷史模式

在創建路由器實例時，history配置允許我們在不同的歷史模式中進行選擇。

Vue 3.0

Hash模式

使用createWebHashHistory()創建

import {createRouter, createWebHashHistory} from 'vue-router'
const router = createRouter({
    history:createWebHashHistory(),
    routes
})

HTML5模式

使用createWebHistory()創建

import {createRouter, createWebHistory} from 'vue-router'
const router = createRouter({
    history: createWebHistory(),
    routes
})

Vue 2.0

Hash模式

const router = new VueRouter({
    mode: 'hash',
    routes
})

History模式

const router = new VueRouter({
    mode: 'history',
    routes
})

 總結：

Hash模式在內部傳遞的實際URL之前使用了一個哈希字符(#)。由於這部分URL從未被發送到服務器，所以它不需要在服務器層面上進行任何特殊處理。vue-router默認Hash模式，使用URL的hash來模擬一個完整的URL，當URL改變時，頁面不會重新加載。但它在SEO(搜索引擎優化)中確實有不好的影響，若擔心這個問題，可以使用HTML5模式。

History模式的URL會看起來很‘正常’，沒有哈希字符。History模式充分利用history.pushState API來完成URL跳轉而無需重新加載頁面。但由於我們的應用是一個單頁的客戶端應用，若沒有適當的服務器配置，用戶在瀏覽器中直接訪問，就會得到一個404錯誤。刷新會404，因為History模式使用真正的頁面網址當做路徑，一刷新，客戶端會拿着這個完整的頁面地址去服務器找，但該網址找不到，畢竟這個路徑和對應頁面都配置在前端。而Hash模式的#將后面路徑認定是前端配置的路徑，所以不會去后端找。如果想正常使用History模式，可以讓后端配置nginx服務器，做路徑處理(在服務器上添加一個簡單的回退路由，若URL不匹配任何靜態資源，它提供與你的應用程序中的index.html相同的頁面)。

 服務器配置示例(針對History模式)

不涉及前端，略。詳細內容看Vue Router文檔。

注：服務器這么配置以后，就不會再返回404錯誤頁面，因為對於所有路徑都會返回index.html，然后再到前端去找對應路徑資源，但是這里又存在一個問題，即使輸錯了url，也不會報錯，而是會跳轉到index.html，這是不對的，因為輸錯了url，就是應該返回404，所以前端還要再在vue route中配置一個能覆蓋所有情況的路由，然后給出一個404頁面：

{
        path: '*',
        component: NotFoundComponent
}

當然，path:'*'這個路由配置肯定要寫在最后了，只有前面的路由配置都沒被映射到，才會被匹配到這里，不然寫在前面的話，所有路徑直接都匹配404了。