想要學好vue，vue的路由功能是必不可少的，也是做單頁應用開發，必不可少的一環，那麼接下來我們就來看看vue的路由是怎麼一回事吧。
什麼是路由
路由可分為：
客戶端路由 (Client-side Routing)
客戶端路由，也稱為單頁應用路由（SPA - Single Page Application routing），是在瀏覽器中管理應用程式內部不同檢視或頁面的過程。當用戶在應用內部導航時，客戶端路由會更新URL，並且只請求和渲染那些發生變化的部分，而不是重新載入整個頁面。
服務端路由 (Server-side Routing)
服務端路由則是在伺服器上處理URL請求的過程。當用戶訪問一個URL時，伺服器根據URL解析出對應的資源或業務邏輯，並返回相應的HTML頁面或API響應,每次頁面導航都會導致完整的頁面載入。。
在Vue.js中，路由指的是一個框架內用於處理URL和檢視之間的對映關係的系統，通常我們使用vue-router庫來實現這一功能。vue-router是Vue.js官方提供的路由管理器，它與Vue的核心深度整合，使得構建單頁面應用（SPA）變得更加容易。
路由的使用
如果你想為你的vue專案加入路由功能：
使用 JavaScript 包管理器安裝Vue Router， 輸入指令：
npm install vue-router@4
或者你需要建立新專案，可以使用npm create vue@latest,他會建立一個基於vite的vue專案，它會提供Vue Router的選項，只需要在建立的時候新增就好了。
新增Vue Router選項的方式引入路由咱就不說了，讓我們自己來手動引入看看，該怎麼使用vue路由吧。
首先在專案內下載vue-router庫,指令為：
npm install vue-router@4在src目錄下建立
router檔案，新增一個index.js的路由配置檔案，內容如下：
可以配置很多個路由，其他的路由配置和這個路由的格式是一樣，我們只需要按照這樣配就好，它們也被稱為一級路由。
也可以像下面這樣先引入，再賦值給component屬性。其他可以設定的路由選項我們會在之後介紹，目前我們只需要 path 和 component。
import { createMemoryHistory, createRouter } from 'vue-router'
import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'
const routes = [ {
path: '/',
component: HomeView
},
{
path: '/about',
component: AboutView
},
]
const router = createRouter({ // 建立路由器例項是透過呼叫 `createRouter()` 函式建立的:
history: createMemoryHistory(),
routes,
})
配置history時，通常，我們會使用
createWebHistory()或createWebHashHistory()：createWebHashHistory()不需要伺服器端的特殊配置，但 URL 包含#，可能不那麼美觀。createWebHistory()提供更乾淨的 URL 結構，但需要伺服器端的配合。createWebHashHistory是Vue Router 4中用於建立一個基於瀏覽器雜湊 (#) 的歷史記錄物件的方法。它利用瀏覽器的URL雜湊部分來儲存路由狀態，而不觸發完整的頁面過載。此方法特別適用於相容舊瀏覽器的單頁面應用（SPA），相容性較好。createWebHistory()是 Vue Router 庫中的一個函式，用於建立一個基於 HTML5 歷史 API 的路由器例項，使用createWebHistory()的一個關鍵點是，伺服器必須正確配置，以處理所有路徑都指向同一個入口檔案（通常是index.html）。這是因為，當用戶直接訪問或重新整理非根 URL 時，如果沒有正確的伺服器配置，可能會導致 404 錯誤。
總結
我們在Vue Router中定義了path: '/home'這樣的路由規則時，意味著有一個特定的元件被關聯到了/home這個URL路徑。爲了讓這個元件的內容展示在頁面上，你需要在瀏覽器的位址列中輸入http://xxxxxx/home（其中xxxxxx是你的網站域名），或者在應用內部透過<router-link :to="{ path: '/home' }">或this.$router.push('/home')等方式進行導航。
<template> <nav> <RouterLink to="/">Go to Home</RouterLink> <RouterLink to="/about">Go to About</RouterLink> </nav> <main> <RouterView /> </main> </template>
就像上面的這樣可以點選
Go to About，/home路徑下的特定元件將被顯示在<RouterView />，而RouterView又被稱為——路由入口。<router-link>是Vue Router提供的一種特殊的Vue元件，用於在單頁應用中建立連結。它的工作方式類似於HTML中的<a>標籤，但是它在內部使用Vue Router的導航機制，而不是傳統的頁面跳轉，這意味著在點選連結時，頁面不會完全重新載入，而是隻更新與新路由關聯的部分檢視。<router-view>是Vue Router中一個非常關鍵的元件，用於在應用程式中渲染與當前活動路由相匹配的元件。它是Vue Router的主要出口點，負責展示當前路由對應的檢視內容。這樣就可以使用路由功能嗎？其實這樣是不行，我們還需要在專案單點入口檔案內引入這個
router，並使用。
啟動專案，你的一個簡單的路由使用就完成了。
路由傳引數
應用場景：
路由傳遞引數是一個很常見的場景，就像掘金的文章檢視一樣：
有一個文章id，然後透過id查詢該篇文章的資訊，進行展示，所有這個還是很常見的。
傳參，首先需要了解程式設計式導航（下面是vue-router官方文件解釋）
想要導航到不同的 URL，可以使用
router.push方法。這個方法會向 history 棧新增一個新的記錄，所以，當用戶點選瀏覽器後退按鈕時，會回到之前的 URL。當你點選
<router-link>時，內部會呼叫這個方法，所以點選<router-link :to="...">相當於呼叫router.push(...)：所以你用路由時攜帶引數可以這樣：
不宣告 prop接收引數：
爲了解除使用$route 或useRoute()會與路由耦合的限制，可以宣告 prop 接收引數：
