一、前言
隨著 Vue.js 在前端開發中的廣泛應用，Vue Router 成為了 Vue 官方推薦的路由管理器。它不僅支持單頁面應用（SPA）中常見的路由跳轉、嵌套路由、懶加載等功能，還提供了導航守衛、動態路由等高級特性。
本文將帶你深入了解：
- Vue Router 的基本概念；
- 路由配置與使用方式；
- 嵌套路由與命名視圖；
- 動態路由與懶加載；
- 導航守衛機制；
- 實際開發中的典型使用場景；
通過這篇文章，你將掌握 Vue Router 的核心功能與原理，能夠熟練地在項目中進行路由管理。
二、什么是 Vue Router？
Vue Router 是 Vue.js 官方的路由管理庫，用于構建單頁應用（SPA），實現不同組件之間的切換和導航。
? 核心功能：
| 功能 | 描述 |
|---|---|
| 路由映射 | 將路徑映射到組件 |
| 組件切換 | 不刷新頁面切換組件 |
| 參數傳遞 | 支持動態路由參數（如?/user/:id） |
| 嵌套路由 | 實現父子級組件結構 |
| 懶加載 | 異步加載組件，提升性能 |
| 導航守衛 | 控制路由跳轉邏輯（權限驗證、登錄攔截等） |
三、Vue Router 的安裝與配置
? 安裝（Vue 3）
npm install vue-router@4? 創建路由實例（router/index.js）
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
]const router = createRouter({history: createWebHistory(),routes
})export default router? 在?main.js?中掛載路由
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app')四、基礎使用：路由跳轉與組件渲染
??<router-link>：聲明式導航
<router-link to="/">首頁</router-link>
<router-link to="/about">關于</router-link>??<router-view>：動態渲染組件的位置
<router-view />📌 效果：
- 點擊鏈接時，不會刷新頁面；
- 頁面內容根據當前路徑自動切換為對應組件；
五、動態路由與參數傳遞
? 動態路由示例
{path: '/user/:id',name: 'User',component: () => import('../views/User.vue')
}? 在組件中獲取參數
export default {mounted() {console.log(this.$route.params.id)}
}📌 示例 URL：
/user/123?→?this.$route.params.id === '123'
六、嵌套路由（父子路由）
適用于多級菜單、布局嵌套等場景。
? 路由配置
{path: '/dashboard',name: 'Dashboard',component: DashboardLayout,children: [{path: 'profile',component: Profile},{path: 'settings',component: Settings}]
}? 頁面結構
<!-- DashboardLayout.vue -->
<template><div><h2>儀表盤布局</h2><router-view /> <!-- 子路由組件在這里顯示 --></div>
</template>📌 訪問路徑：
/dashboard/profile/dashboard/settings
七、命名視圖（多個?<router-view>）
適用于需要在同一頁面展示多個組件區域，例如側邊欄 + 主體內容。
? 路由配置
{path: '/layout',components: {default: MainContent,sidebar: SideBar}
}? 模板中使用多個?<router-view>
<router-view />
<router-view name="sidebar" />八、懶加載組件（按需加載）
懶加載是優化首屏加載速度的重要手段，Vue Router 支持異步加載組件。
? 使用?import()?實現懶加載
{path: '/contact',name: 'Contact',component: () => import('../views/Contact.vue')
}📌 特點：
- 只有訪問該路由時才會加載對應的組件；
- 減少初始加載時間，提升用戶體驗；
九、導航守衛（Navigation Guards）
導航守衛用于控制路由的跳轉邏輯，常用于權限驗證、登錄攔截、頁面緩存等場景。
? 全局前置守衛：beforeEach
router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isAuthenticated()) {next('/login') // 未登錄跳轉登錄頁} else {next()}
})? 路由獨享守衛：beforeEnter
{path: '/profile',name: 'Profile',component: Profile,beforeEnter: (to, from, next) => {if (checkPermission(to.params.id)) {next()} else {next('/')}}
}? 組件內守衛
beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave
export default {beforeRouteLeave(to, from, next) {const answer = window.confirm('確定離開嗎？數據可能未保存。')if (answer) {next()} else {next(false)}}
}十、編程式導航（JS 控制跳轉）
除了使用 <router-link> 進行跳轉外，還可以通過 JS 方式實現導航。
// 字符串路徑
this.$router.push('/home')// 命名路由 + 參數
this.$router.push({ name: 'User', params: { id: 123 } })// 替換當前歷史記錄（不產生新記錄）
this.$router.replace('/login')十一、常見問題與解決方案
| 問題 | 解決方案 |
|---|---|
| 路由跳轉后頁面不更新 | 使用?key?屬性強制重新渲染組件 |
獲取不到?$route?或?$router | 確保組件已正確注冊并處于?<router-view>?內 |
| 動態添加路由無效 | 使用?router.addRoute()?方法 |
多個?<router-view>?不生效 | 檢查是否遺漏了?name?屬性或拼寫錯誤 |
| 導航守衛無法阻止跳轉 | 檢查是否調用了?next()?并正確返回結果 |
十二、總結對比表
| 功能 | 推薦方式 |
|---|---|
| 基礎路由跳轉 | <router-link>?+?<router-view> |
| 動態路由傳參 | params?/?query |
| 嵌套組件結構 | children?配置 |
| 多視圖展示 | 命名?<router-view> |
| 按需加載組件 | () => import(...) |
| 權限控制 | 全局/路由/組件守衛 |
| 編程式跳轉 | router.push()?/?replace() |
| 推薦程度 | ?? 強烈推薦掌握 |
十三、結語
感謝您的閱讀！如果你有任何疑問或想要分享的經驗，請在評論區留言交流！
)
