文章目錄
- 一、路由配置相關
- 二、路由實例方法（`router` 實例）
- 三、組件內路由 API（`useRouter` / `useRoute`）
- 四、導航守衛（路由攔截）
- 五、路由視圖與導航組件
- 六、其他常用 API
- 七、history模式和hash模式有什么區別？
- 1. URL 格式不同
- 2. 底層實現原理不同
- 3. 服務器配置要求不同
- 4. 功能限制不同
- 5、如何選擇？
- 6、模式切換方式
Vue Router 是 Vue 官方的路由管理庫，提供了豐富的 API 用于處理路由配置、導航控制、參數傳遞等功能。以下是其常用 API 的分類整理：
一、路由配置相關
-
createRouter
創建路由實例的核心函數，接收history和routes配置：import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({history: createWebHistory(), // 路由模式routes: [/* 路由規則數組 */] }) -
createWebHistory/createWebHashHistory
定義路由模式：createWebHistory()：HTML5 History 模式（無#，需服務端配置）createWebHashHistory()：Hash 模式（帶#，無需服務端配置）
-
路由規則配置（
routes數組元素）
每個路由對象的常用屬性：path：路由路徑（如/home）name：路由名稱（用于命名路由跳轉）component：對應組件（如Home）children：嵌套路由（子路由配置）props：是否將路由參數轉為組件 props（true/ 對象 / 函數）meta：自定義元數據（如{ requiresAuth: true }用于權限控制）
二、路由實例方法（router 實例）
-
router.push()
導航到新路由（類似window.location.href）：// 字符串路徑 router.push('/home') // 命名路由 + 參數 router.push({ name: 'user', params: { id: 1 } }) // 查詢參數 router.push({ path: '/search', query: { q: 'vue' } }) -
router.replace()
導航到新路由，但不會向歷史記錄添加新條目（替換當前記錄）：router.replace('/about') -
router.go(n)
操作歷史記錄（類似window.history.go(n)）：router.go(1) // 前進一頁 router.go(-1) // 后退一頁 -
router.addRoute()/router.removeRoute()
動態添加/刪除路由：// 添加路由 router.addRoute({ path: '/new', component: NewComponent }) // 刪除路由（通過名稱） router.removeRoute('new')
三、組件內路由 API（useRouter / useRoute）
-
useRouter()
在組件中獲取路由實例（用于調用導航方法）：import { useRouter } from 'vue-router' const router = useRouter() const goHome = () => router.push('/home') -
useRoute()
在組件中獲取當前路由信息對象（包含路徑、參數等）：import { useRoute } from 'vue-router' const route = useRoute() // 當前路徑 console.log(route.path) // 路由參數（params） console.log(route.params.id) // 查詢參數（query） console.log(route.query.q) // 元數據 console.log(route.meta.requiresAuth)
四、導航守衛（路由攔截）
-
全局守衛
router.beforeEach((to, from, next) => { ... })
路由跳轉前觸發（常用于登錄鑒權）：router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isLogin) {next('/login') // 未登錄則跳轉到登錄頁} else {next() // 允許跳轉} })router.afterEach((to, from) => { ... })
路由跳轉后觸發（常用于頁面標題設置）。
-
路由獨享守衛
在路由規則中定義beforeEnter：{path: '/admin',component: Admin,beforeEnter: (to, from, next) => {// 僅對當前路由生效的攔截邏輯} } -
組件內守衛
組件內定義的路由鉤子：beforeRouteEnter：進入組件前觸發（此時組件實例未創建，無this）beforeRouteUpdate：組件復用（路由參數變化）時觸發beforeRouteLeave：離開組件前觸發（常用于未保存數據提示）
五、路由視圖與導航組件
-
<router-view>
路由出口，用于渲染匹配的組件：<!-- 基礎用法 --> <router-view /> <!-- 命名視圖（用于同時渲染多個組件） --> <router-view name="sidebar" /> -
<router-link>
路由導航組件（生成<a>標簽，避免頁面刷新）：<!-- 基礎用法 --> <router-link to="/home">首頁</router-link> <!-- 命名路由 --> <router-link :to="{ name: 'user', params: { id: 1 } }">用戶</router-link> <!-- 替換當前歷史記錄 --> <router-link to="/about" replace>關于</router-link>
六、其他常用 API
router.resolve()：解析路由地址，返回路由信息對象。router.hasRoute()：檢查路由是否存在（通過名稱）。router.getRoutes()：獲取所有路由記錄的數組。scrollBehavior：路由跳轉時的滾動行為配置（在createRouter中定義）。
七、history模式和hash模式有什么區別？
Vue Router 中的 history 模式和 hash 模式是兩種不同的路由實現方式，主要區別體現在 URL 格式、底層原理、服務器配置等方面，具體如下：
1. URL 格式不同
-
hash 模式（默認）：
URL 中包含#符號，#后面的部分為路由路徑。例如：
http://example.com/#/home、http://example.com/#/user/123
#及其后面的內容不會被發送到服務器，僅用于客戶端路由解析。 -
history 模式：
URL 中不包含#，使用標準的 HTML5 History API 實現。例如：
http://example.com/home、http://example.com/user/123
看起來更接近傳統的 URL，視覺上更友好。
2. 底層實現原理不同
-
hash 模式：
基于瀏覽器的hashchange事件實現。當#后面的路徑變化時，瀏覽器不會重新請求頁面，但會觸發hashchange事件，Vue Router 監聽該事件并切換對應組件。
優點：兼容性好（支持所有現代瀏覽器及 IE8+），無需服務器配置。 -
history 模式：
基于 HTML5 的history.pushState()和history.replaceState()方法（屬于 History API）。這些方法可以在不刷新頁面的情況下修改瀏覽器歷史記錄，Vue Router 通過監聽歷史記錄變化實現路由切換。
優點：URL 更美觀，符合用戶對 URL 的直觀認知。
缺點：兼容性稍差（僅支持 IE10+），且需要服務器配合配置。
3. 服務器配置要求不同
-
hash 模式：
無需特殊配置。因為#后面的內容不會發送到服務器，無論訪問http://example.com/#/home還是http://example.com/#/user，服務器實際收到的請求都是http://example.com/，只需返回單頁應用的入口 HTML 即可。 -
history 模式：
必須配置服務器。因為當用戶直接訪問http://example.com/user時，瀏覽器會向服務器發送該路徑的請求，若服務器未配置對應路由，會返回 404 錯誤。
解決方法：服務器需將所有路由請求重定向到單頁應用的入口 HTML（如index.html）。
示例配置（Nginx）：location / {try_files $uri $uri/ /index.html; }
4. 功能限制不同
-
hash 模式：
#后面的內容無法作為 HTTP 請求的一部分，因此不利于 SEO（搜索引擎可能忽略#后的內容）。- 不能使用
history.go(n)等方法精確控制歷史記錄（但日常使用影響不大）。
-
history 模式：
- 支持
history.state存儲額外數據，可在路由跳轉時傳遞更多信息。 - 可以使用
popstate事件監聽歷史記錄變化，實現更靈活的導航控制。 - URL 更利于 SEO 和分享（無
#符號，更符合常規 URL 規范）。
- 支持
5、如何選擇？
- 若項目需要兼容舊瀏覽器（如 IE9 及以下），或不想配置服務器，選擇 hash 模式。
- 若追求更美觀的 URL、更好的 SEO 支持，且能配置服務器，選擇 history 模式（推薦現代項目使用）。
6、模式切換方式
在創建路由實例時指定模式：
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'// hash 模式
const router = createRouter({history: createWebHashHistory(), // 使用 hash 模式routes: [...]
})// history 模式
const router = createRouter({history: createWebHistory(), // 使用 history 模式routes: [...]
})
總結：兩種模式核心功能一致，但 history 模式在 URL 美觀性和功能擴展性上更優，而 hash 模式在兼容性和部署便捷性上更有優勢。
)
