前言

????????在現代化的前端開發中，路由管理是構建單頁應用（SPA）的核心功能之一。Vue.js 作為主流的前端框架之一，提供了強大的官方路由庫Vue Router，幫助開發者高效管理頁面跳轉、動態加載、權限控制等關鍵需求。

????????無論是構建企業級后臺系統，還是開發高性能的 Web 應用，靈活運用 Vue Router 都能顯著提升用戶體驗和開發效率。本文將深入解析 Vue Router 的核心概念、最佳實踐以及高級技巧，幫助開發者掌握路由管理的精髓，打造更流暢、可維護的前端應用。

步驟

1.安裝

npm i vue-router@4

? ? ? ? 使用該命名安裝Vue Router

2.創建文件配置路由實例

? ? ? ? 在src文件夾目錄下創建router文件夾，在該文件夾中創建index.js，在其配置路由

// 1.導入 createRouter 和 createWebHistory 
import { createRouter, createWebHistory } from 'vue-router'// 2.定義路由
const routes = [{path: '/', // 重定向redirect: '/home'},{path: '/home',component: () => import("../components/home.vue")},{path: '/about',component: () => import("../components/about.vue")}
]// 3.創建路由實例
const router = createRouter({history: createWebHistory(), // 歷史模式routes
})// 4.導出路由實例
export default router

? ? ? ? 除了歷史模式以外還有哈希模式，它們的區別如下：

哈希模式（Hash Mode）：

????????哈希模式利用URL中的#符號來模擬路由。例如，http://example.com/#/about。瀏覽器不會將#號后面的內容發送到服務器，因此路由變化不會觸發頁面刷新。

• 無需服務器配置即可直接使用，適合靜態部署。
• 兼容性較好，支持老舊瀏覽器。
• URL 中帶有 #，美觀性稍差。

歷史模式（History Mode）:

? ? ? ??歷史模式利用HTML5的history.pushState API實現無刷新路由切換，例如，http://example.com/about。URL更簡潔，但需要服務器支持。

• 需要服務器配置，確保所有路徑返回?index.html，避免 404 錯誤。
• URL更美觀，無#符號
• 兼容性稍差，不支持IE9及以下版本。

選擇建議

• 需要快速部署或靜態托管時，選擇哈希模式。
• 追求美觀且能配置服務器時，選擇歷史模式。

3.全局引用

? ? ? ? 將配置好的路由實例引入到main.js中，代碼如下：

import router from './router'const app = createApp(App)app.use(router)

?4.配置路由視圖和導航

? ? ? ? 在App.vue或根組件中，添加<router-view>作為路由組件的渲染出口，并使用<router-link>實現導航跳轉，示例代碼如下：

<template><div class="app"><!-- 導航鏈接 --><router-link to="/home">home</router-link><router-link to="/about">about</router-link><!-- 路由組件渲染位置 --><router-view></router-view></div> 
</template>

5.動態路由與參數傳遞

? ? ? ? 通過冒號 : 定義動態路由參數，例如用戶詳情頁面：

{path:'/user/:id',component: () => import("../components/User.vue")}

? ? ? ? 在需要進行跳轉時通過router.push進行跳轉：

<script setup>
import { ref } from 'vue';
import router from './router';const id = ref(22)
function handleUserPage() {router.push(`/user/${id.value}`)
}
</script>

? ? ? ? 在組件中通過useRoute獲取參數：

<script setup>
import { useRoute } from 'vue-router';const route = useRoute();
console.log(route.params.id);
</script>

6.路由守衛配置

? ? ? ? 比如說我們進入一些頁面時需要先登錄，為防止在用戶沒有登錄的情況下通過url進入首頁，因此就需要去配置全局前置守衛beforeEach

    {path: '/user/:id',name: 'user',component: () => import("../components/User.vue")}// 配置路由守衛
router.beforeEach((to, from, next) => {if (to.name === 'user') {  // 通過name匹配const id = to.params.id;if (id === '123') {next();} else {next('/home');}} else {next();}
})

? ? ? ? 就比如說這個例子，當我們需要進入user組件時，需要去判斷它的id是不是為123，如果是則放行，不是則跳轉到home組件。

? ? ? ? 但在實際項目中，這里一般是對登錄功能進行操作的，當用戶登錄時我們會將token保存起來，這里就去判斷是否有token，如果有則放行進入首頁，沒有則無法進入首頁。

7.路由元信息

????????為路由添加自定義數據：

    {path: '/home',component: () => import("../components/home.vue"),meta:{requiresAuth:true, title:'首頁'}},

? ? ? ? 通過導航守衛修改頁面標題：

router.afterEach((to, from) => {document.title = to.meta.title || '默認標題';
})

結語：

? ? ? ??感謝閱讀，期待這些見解能為你的學習或工作帶來啟發。若有更多疑問或需求，歡迎進一步交流與討論。