在構建現代化單頁應用（SPA）時，Vue3 憑借其簡潔高效的特性成為眾多開發者的首選。
而 Vue3 路由（Vue Router）則是 Vue3 生態中不可或缺的一部分，它就像是單頁應用的 “導航地圖”，幫助用戶在不同的頁面（組件）之間自由穿梭，同時保證頁面的流暢切換，無需刷新整個網頁。
一、Vue3 路由的基礎概念
1. 什么是路由
路由可以簡單理解為 “網址” 與 “頁面內容（組件）” 之間的對應關系。
在傳統的多頁應用中，每一個頁面都是一個獨立的 HTML 文件，通過超鏈接跳轉時，瀏覽器會重新加載新的頁面。而在單頁應用里，整個應用只有一個 HTML 文件，通過路由來控制不同組件的顯示與隱藏，從而模擬出頁面跳轉的效果。
例如，當用戶訪問?https://example.com/home?時，顯示首頁組件；訪問?https://example.com/about?時，顯示關于我們的組件，這就是路由在起作用。
2. Vue Router 的作用
Vue Router 是 Vue.js 官方的路由管理器，專門為 Vue 應用開發設計。它不僅實現了 URL 與組件的映射，還提供了諸如路由嵌套、路由守衛、動態路由等強大功能，讓開發者能夠輕松構建復雜的單頁應用架構，提升用戶體驗。
二、Vue3 路由的安裝與基本使用
1. 安裝 Vue Router
在使用 Vue3 路由之前，需要先安裝它。如果你的項目是通過 npm 管理依賴，可以在項目根目錄下執行以下命令：
npm install vue-router@4
如果你使用的是 yarn，則執行：
yarn add vue-router@4
這里安裝的是 Vue Router 4 版本，它完美適配 Vue3。
2. 創建路由實例
安裝完成后，在項目中創建一個路由文件，例如?router.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;
在這段代碼中：
- 首先從?
vue-router?中引入?createRouter?和?createWebHistory?方法。createRouter?用于創建路由實例，createWebHistory?用于創建基于 HTML5 History API 的路由模式，這種模式下的 URL 更加簡潔美觀，例如?https://example.com/about，沒有多余的哈希符號。 - 接著引入了兩個組件?
Home?和?About，它們將作為不同路由對應的顯示內容。 - 然后定義?
routes?數組，其中每個對象表示一條路由規則，包含?path（路由路徑）、name（路由名稱，方便在代碼中引用）和?component（對應的組件）。 - 最后通過?
createRouter?方法創建路由實例，并將配置好的?history?和?routes?傳入，再將路由實例導出，以便在 Vue 應用中使用。
3. 在 Vue 應用中使用路由
在?main.js?文件中，引入創建好的路由實例，并將其掛載到 Vue 應用上：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';const app = createApp(App);
app.use(router);
app.mount('#app');
這樣，路由就已經集成到 Vue 應用中了。在?App.vue?文件中，可以使用?<router-view>?組件來顯示當前路由對應的組件內容，例如：
<template><div id="app"><router-view></router-view></div>
</template>
同時，還可以使用?<router-link>?組件來創建導航鏈接，代替傳統的?<a>?標簽，例如：
<template><div id="app"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link><router-view></router-view></div>
</template>
此時，點擊這些鏈接，頁面會在不刷新的情況下顯示對應的組件內容。
三、Vue3 路由的進階功能
1. 動態路由
在實際應用中，經常會遇到需要傳遞參數的路由，例如顯示用戶詳情頁，每個用戶都有一個唯一的 ID。這時就可以使用動態路由，在路由路徑中使用參數，示例如下：
const routes = [{path: '/user/:id',name: 'User',component: User}
];
在上述代碼中，:id?就是一個動態參數。當用戶訪問?https://example.com/user/1?時，1?這個值會被傳遞到?User?組件中。在?User?組件中，可以通過?this.$route.params.id（在選項式 API 中）或?useRoute().params.id（在組合式 API 中）來獲取這個參數值。
2. 路由嵌套
有些頁面的結構比較復雜，包含多個子頁面，這時候就需要用到路由嵌套。例如，在一個博客應用中，文章詳情頁可能還包含評論區、相關文章推薦等子模塊，每個子模塊可以對應一個子路由。路由嵌套的配置方式如下：
const routes = [{path: '/article',name: 'Article',component: Article,children: [{path: ':id',name: 'ArticleDetail',component: ArticleDetail},{path: ':id/comments',name: 'ArticleComments',component: ArticleComments}]}
];
在上述代碼中，children?數組定義了?Article?組件的子路由。訪問?https://example.com/article/1?會顯示?ArticleDetail?組件，訪問?https://example.com/article/1/comments?會顯示?ArticleComments?組件。
在?Article.vue?組件中，同樣需要使用?<router-view>?來顯示子路由對應的內容。
3. 路由守衛
路由守衛用于在路由跳轉的不同階段執行一些自定義邏輯，例如驗證用戶登錄狀態、記錄頁面訪問日志等。常見的路由守衛有全局守衛、路由獨享守衛和組件內守衛。
- 全局守衛：在?
router.js?文件中可以定義全局前置守衛?router.beforeEach?和全局后置鉤子?router.afterEach。例如，使用全局前置守衛來驗證用戶是否登錄：
router.beforeEach((to, from, next) => {const isLoggedIn = localStorage.getItem('isLoggedIn');if (to.meta.requiresAuth &&!isLoggedIn) {next('/login');} else {next();}
});
上述代碼中，to?表示即將要進入的目標路由對象，from?表示當前導航正要離開的路由，next?是一個函數，調用?next()?表示放行，繼續跳轉；調用?next('/login')?表示將導航重定向到?/login?路由。
- 路由獨享守衛：在路由配置中，可以為每條路由單獨設置守衛，例如：
const routes = [{path: '/admin',name: 'Admin',component: Admin,beforeEnter: (to, from, next) => {// 執行自定義邏輯next();}}
];
- 組件內守衛：在組件內部定義?
beforeRouteEnter、beforeRouteUpdate?和?beforeRouteLeave?方法，用于在組件的路由相關操作時執行邏輯。
)
)
)
