Vue 路由提供了三種常見(jiàn)的模式:哈希模式(Hash Mode)、歷史模式(History Mode)和抽象模式(Abstract Mode)。
1. 哈希模式(Hash Mode):
在哈希模式下,路由路徑會(huì)被設(shè)置為 URL 的哈希部分(即 # 后面的部分)。哈希模式不會(huì)將路由路徑發(fā)送到服務(wù)器,因此在單頁(yè)應(yīng)用中非常適用。Vue 默認(rèn)采用哈希模式。
2. 歷史模式(History Mode):
歷史模式使用瀏覽器的歷史 API(`pushState` 和 `replaceState`)來(lái)實(shí)現(xiàn)路由導(dǎo)航。它會(huì)將路由路徑直接顯示在 URL 中,沒(méi)有哈希部分。例如:`http://example.com/home`。由于歷史模式會(huì)將路由發(fā)送到服務(wù)器,因此需要在服務(wù)器端進(jìn)行配置,以確保在刷新頁(yè)面或直接訪問(wèn)路由時(shí),能夠正確返回應(yīng)用的入口頁(yè)面。可以通過(guò)設(shè)置 `mode: 'history'` 來(lái)啟用歷史模式。
3. 抽象模式(Abstract Mode):
抽象模式是一種不依賴于瀏覽器 API 的模式,主要用于非瀏覽器環(huán)境,例如服務(wù)器渲染(Server-Side Rendering)。在抽象模式下,路由不會(huì)真正映射到 URL,而是由應(yīng)用自己處理。
要在 Vue Router 中選擇一種路由模式,可以在創(chuàng)建 Router 實(shí)例時(shí)進(jìn)行配置。例如:
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHashHistory(), // 使用哈希模式
// 或者
// history: createWebHistory(), // 使用歷史模式
routes: [
// 路由配置
]
});
在上面的代碼中,通過(guò) `createWebHashHistory()` 或 `createWebHistory()` 來(lái)選擇不同的路由模式。然后,可以根據(jù)具體需求進(jìn)行路由配置。