引言
在現代前端開發中，單頁面應用（SPA）逐漸成為主流，而Vue.js作為一款漸進式框架，也因其簡潔和高效受到了廣泛歡迎。在開發單頁面應用時，我們常常需要處理不同頁面之間的導航與切換，這就需要用到路由管理。而Vue Router正是爲了解決這一問題而生的。那麼今天我們將瞭解如何在Vue專案中配置和使用Vue Router，實現元件之間的無縫切換，打造出使用者體驗更佳的Web應用。
Vue Router
Vue 中所有的 xxx.vue 檔案都是一個元件，這些元件最終會被 Vue 讀取，並編譯成一段 div 結構，掛載在唯一的html檔案中，所以，想要實現元件之間的切換很簡單。
但是，想要將某些元件當成頁面(每個頁面對應的url都是唯一的)來用，預設情況下就行不通
那麼，我們就需要一個可以將程式碼片段的切換模擬成頁面的跳轉的樣子的這樣一個手段，這就是vue-router
路由（Route）
路由是將特定的 URL 對映到特定的元件。每個路由規則通常包含一個路徑和對應的元件。透過定義路由，我們可以在不同 URL下顯示不同的元件。例如，當用戶訪問 /home 路徑時，顯示Home元件；當用戶訪問 /about 路徑時，顯示About元件。
路由檢視（Router View）
<router-view> 是一個佔位元件，用於渲染與當前URL匹配的元件。在應用模板中指定元件渲染的位置。例如，如果當前路徑是 /home，那麼 <router-view> 會渲染Home元件。比如：
<div id="app"> <router-view></router-view> </div>
例項
接下來，我們將透過一個小 demo 來展示如何在Vue專案中安裝和配置Vue Router，並演示一些常見的用法和技巧。
我這裏採用的是類似掘金首頁的路由跳轉。注意點選跳轉時，URL 是否有變化，變化了的就是頁面進行了跳轉也就是路由跳轉。
路由配置
安裝Vue Router
在開始使用Vue Router之前，我們需要先安裝它。可以使用npm進行安裝：
npm install vue-router@4
安裝完成後，我們需要在Vue專案中配置Vue Router。
建立路由例項
首先，建立一個路由配置檔案（如src/router/index.js），在其中定義路由規則並建立路由例項：
import { createRouter, createWebHistory } from "vue-router";
import Home from "../pages/Home.vue";
import Bot from "../pages/Bot.vue";
const router = createRouter({
history: createWebHistory(),
routes: routes,
})
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home,
children: [
{
path: '/home',
redirect: '/home/suggest'
},
{
path: '/home/newest',
component: () => import('../pages/home/Newest.vue')
},
{
path: '/home/suggest',
component: () => import('../pages/home/suggest.vue')
}
]
},
{
path: '/bot',
component: Bot
},
{
path: '/hot',
component: () => import('../pages/Hot.vue')
}
]
export default router
我們的路由配置定義了多個靜態和動態路由，同時使用了巢狀路由和重定向。
根路徑重定向：訪問根路徑
/時，會自動重定向到/home。/home路由及其子路由：/home路由載入Home元件，並且有三個子路由：
/home重定向到/home/suggest。/home/newest動態載入並顯示Newest.vue元件。/home/suggest動態載入並顯示suggest.vue元件。
/bot路由：訪問/bot時，會載入並顯示Bot元件。/hot路由：訪問/hot時，會動態載入並顯示Hot元件。
動態載入元件
細心的朋友會發現我們在載入元件時，有的元件用了不同的方式，部分元件使用了動態載入（非同步元件）。這種方式有助於減小初始載入包的體積，提升頁面載入速度。不需要再import引入元件。也就是如下這種方式：
{
path: '/home/newest',
component: () => import('../pages/home/Newest.vue')
}
巢狀(二級)路由
我們定義了 巢狀路由 也可以說是 二級路由，特別是在 /home 路由下，有多個子路由。子路由路徑可以是相對於父路由的，也可以是絕對路徑。
在Vue例項中使用路由
然後，在入口檔案（如src/main.js）中將路由例項引入到Vue例項中並使用它：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
導航與跳轉
在Vue Router中，導航與跳轉是指在不同的路由之間進行切換。Vue Router提供了兩種主要的導航方式：使用<router-link>元件和程式設計式導航。
使用 <router-link> 進行跳轉
<router-link> 是用於建立導航連結的元件。它類似於HTML中的 <a> 標籤，但具有Vue Router的特殊功能。在我們父元件App.vue中：
<template> <div> <nav> <router-link to="/home">首頁</router-link> | <router-link to="/bot">BOT</router-link> | <router-link to="/hot">沸點</router-link> </nav> <!-- 頁面 --> <router-view></router-view> </div> </template>
to 屬性指定目標路徑。點選連結時，Vue Router會自動更新 URL 並渲染對應的元件。
程式設計式導航
程式設計式導航是指透過編寫程式碼來實現路由的跳轉，而不是透過使用者點選導航連結。在我們Bot.vue元件中使用 $router.push 方法進行導航：
<template>
<div>
<p>BOT page</p>
<button @click="toHot">去沸點</button>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const toHot = () => {
// 跳轉到沸點
// router.push('/hot');
router.push({ path: '/hot', query: {id: 1}});
}
</script>
useRouter是Vue Router 4中提供的組合式API鉤子，用於獲取路由例項。與選項式API中的this.$router類似，useRouter在組合式API中用於訪問路由例項。定義了一個按鈕，當按鈕被點選時，會呼叫
toHot方法。使用router.push方法跳轉到/hot路徑，並傳遞查詢引數id=1。
帶引數的路由跳轉
帶引數的路由跳轉可以在路徑中包含動態引數，或者透過查詢引數傳遞資料。
1. Query：
Query 引數通常用於在URL中附加額外的資訊。它們顯示在URL的查詢字串部分，並且適用於所有路由，無論是否定義了動態路徑引數。
router.push({ path: '/hot', query: {id: 1}});
在目標元件中，可以透過this.$route.query.id來訪問這個引數。 傳遞的URL會變成類似於 /hot?id=1 的形式。
2. Params：
Params 引數用於動態路徑段中，適用於定義了路徑引數的路由。例如，顯示使用者詳情的路由 /user/:id。
// 透過程式設計式導航傳遞 params 引數
router.push({ name: 'user', params: { id: 123 } });
// 使用<router-link>
<router-link :to="{ name: 'user', params: { id: 123 } }">User</router-link>
在目標元件中可以透過this.$route.params.id來訪問這個引數。傳遞的URL會變成類似於 /user/123 的形式。
總結
今天，我們學習了Vue Router的使用，掌握瞭如何配置Vue Router、使用不同方式進行路由跳轉以及在跳轉時傳遞引數。
希望透過今天的分享，能夠幫助你掌握Vue Router的基本用法，從而在實際專案中更好地管理和組織你的路由。無論你是Vue的新手還是有一定經驗的開發者，相信都能為你帶來一些有價值的啓發和幫助。期待下次的分享。
