一、前言：為什么要學習 Vue Router？
在單頁面應用(SPA)開發中，路由管理是核心功能之一。Vue Router 作為 Vue.js 官方推薦的路由解決方案，與 Vue.js 深度集成，提供了以下重要功能：
- 頁面無刷新跳轉：保持應用狀態的同時切換視圖
- 嵌套路由：構建復雜的頁面布局結構
- 路由守衛：控制導航權限和邏輯
- 動態路由：根據需求加載路由配置
- 滾動行為控制：提升用戶體驗
本教程將使用 Vue 3 的 Composition API 和 <script setup> 語法糖，這是目前最推薦的使用方式，代碼更簡潔，邏輯更清晰。
二、環境準備：創建帶路由的 Vue 項目
對于初學者，推薦使用 Vite 創建 Vue 項目：
npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install vue-router@4
npm run dev
三、基礎路由配置詳解
1. 創建路由實例
在 src/router/index.js 中：
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'// 定義路由配置
const routes = [{path: '/', // 訪問路徑name: 'home', // 路由名稱（可選但推薦）component: HomeView // 對應的組件},{path: '/about',name: 'about',// 路由懶加載（性能優化）component: () => import('../views/AboutView.vue')}
]// 創建路由實例
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL), // 使用HTML5 history模式routes // 注入路由配置
})export default router
2. 在主文件中安裝路由
src/main.js 中：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 導入路由配置const app = createApp(App)app.use(router) // 使用路由插件app.mount('#app')
3. 在 App.vue 中添加路由視圖
<script setup>
// 這里可以導入需要的組件或邏輯
</script><template><header><!-- 導航鏈接 --><nav><router-link to="/">首頁</router-link><router-link to="/about">關于</router-link></nav></header><!-- 路由匹配的組件將渲染在這里 --><router-view></router-view>
</template><style>
/* 基礎樣式 */
.router-link-active {font-weight: bold;
}
</style>
四、編程式導航的三種常用方式
1. 字符串路徑
最簡單直接的跳轉方式：
<script setup>
import { useRouter } from 'vue-router'const router = useRouter()const goToAbout = () => {router.push('/about') // 直接使用路徑字符串
}
</script><template><button @click="goToAbout">關于我們</button>
</template>
2. 命名路由（推薦）
使用路由配置中的 name 屬性，更易于維護：
<script setup>
import { useRouter } from 'vue-router'const router = useRouter()const goToHome = () => {router.push({ name: 'home' }) // 使用路由名稱
}
</script>
3. 帶參數的對象形式
最靈活的方式，可以添加各種參數：
<script setup>
import { useRouter } from 'vue-router'const router = useRouter()const goToUserProfile = () => {router.push({name: 'user', // 路由名稱params: { id: 123 }, // 路徑參數query: { tab: 'profile' }, // 查詢參數hash: '#contact' // 哈希值})
}
</script>
五、路由傳參的三種方法對比
1. params 傳參（動態路由）
適用場景：參數是路徑的一部分，如 /user/123
路由配置：
{path: '/user/:id', // 動態路徑參數name: 'user',component: UserView
}
跳轉方法：
router.push({ name: 'user', params: { id: 123 } })
接收參數：
<script setup>
import { useRoute } from 'vue-router'const route = useRoute()
const userId = route.params.id // 123
</script>
2. query 傳參（查詢參數）
適用場景：可選參數，如 /search?q=vue
跳轉方法：
router.push({path: '/search',query: { q: 'vue', page: 1 }
})
接收參數：
<script setup>
import { useRoute } from 'vue-router'const route = useRoute()
const searchQuery = route.query.q // 'vue'
const pageNum = route.query.page // '1' (注意是字符串)
</script>
3. props 傳參（最推薦）
優點：組件不直接依賴路由，更易于復用
路由配置：
{path: '/product/:id',name: 'product',component: ProductView,props: true // 將params轉為props// 或者使用函數形式更靈活// props: route => ({ id: route.params.id, query: route.query })
}
組件接收：
<script setup>
defineProps({id: {type: String,required: true}
})
</script>
六、導航守衛實戰
1. 全局前置守衛（常用做權限控制）
// router/index.js
router.beforeEach((to, from, next) => {const isAuthenticated = checkLoginStatus() // 你的驗證邏輯if (to.meta.requiresAuth && !isAuthenticated) {// 如果需要登錄且未登錄，跳轉到登錄頁next({ name: 'login' })} else if (to.name === 'login' && isAuthenticated) {// 如果已登錄又訪問登錄頁，跳轉到首頁next({ name: 'home' })} else {// 正常放行next()}
})
2. 組件內守衛（處理未保存更改等場景）
<script setup>
import { onBeforeRouteLeave } from 'vue-router'const unsavedChanges = ref(false)// 用戶嘗試離開時提示
onBeforeRouteLeave((to, from, next) => {if (unsavedChanges.value) {const confirmLeave = confirm('您有未保存的更改，確定要離開嗎？')if (confirmLeave) {next()} else {next(false) // 取消導航}} else {next()}
})
</script>
七、常見問題解決方案
1. 路由重復導航錯誤
router.push('/some-path').catch(err => {if (err.name !== 'NavigationDuplicated') {// 如果不是重復導航錯誤，拋出其他錯誤throw err}
})
2. 響應式監聽路由參數變化
<script setup>
import { useRoute } from 'vue-router'
import { watch } from 'vue'const route = useRoute()// 監聽id參數變化
watch(() => route.params.id,(newId) => {if (newId) {fetchData(newId) // 重新獲取數據}},{ immediate: true } // 立即執行一次
)
</script>
八、最佳實踐建議
- 路由命名：始終為路由設置 name 屬性，便于維護
- 懶加載：路由組件盡量使用
() => import()語法 - 參數傳遞：優先使用 props 方式，提高組件復用性
- 導航守衛：合理使用，避免過度復雜的邏輯
- 錯誤處理：對可能失敗的導航添加錯誤處理
九、總結
通過本教程，你應該已經掌握了：
? Vue Router 的基本配置方法
? 編程式導航的各種使用場景
? 三種路由傳參方式及適用情況
? 導航守衛的實際應用
? 常見問題的解決方案
路由是 Vue 單頁面應用的核心，建議初學者多動手實踐，嘗試不同的配置和跳轉方式。遇到問題時，可以查閱 Vue Router 官方文檔 獲取最新信息。
如果有任何疑問，歡迎在評論區留言討論！
