在 Vue 3 中，路由的處理使用了 Vue Router，它是官方提供的路由管理器。Vue Router 用于實(shí)現(xiàn)單頁應(yīng)用中的路由功能，通過將不同的 URL 映射到對應(yīng)的組件，實(shí)現(xiàn)頁面之間的切換和導(dǎo)航。

Vue Router 的作用包括：

1. 實(shí)現(xiàn)頁面之間的切換：通過定義路由規(guī)則，將不同的 URL 映射到相應(yīng)的組件，實(shí)現(xiàn)頁面的切換效果。
2. 實(shí)現(xiàn)嵌套路由：Vue Router 支持嵌套路由，可以在父路由下定義子路由，實(shí)現(xiàn)復(fù)雜的頁面結(jié)構(gòu)。
3. 提供導(dǎo)航守衛(wèi)：Vue Router 提供了導(dǎo)航守衛(wèi)（beforeEach、beforeResolve、afterEach），可以在路由切換前后執(zhí)行相應(yīng)的邏輯，例如權(quán)限驗(yàn)證、路由攔截等。
4. 支持動態(tài)路由和參數(shù)傳遞：Vue Router 可以配置動態(tài)路由，通過在路由路徑中使用參數(shù)，實(shí)現(xiàn)不同參數(shù)對應(yīng)不同組件的效果。

配置 Vue Router 的步驟如下：

1. 安裝 Vue Router：使用 npm 或 yarn 安裝 Vue Router，可以通過以下命令進(jìn)行安裝：

npm install vue-router

1. 創(chuàng)建路由實(shí)例：在 Vue 項(xiàng)目中，通常需要創(chuàng)建一個(gè)路由實(shí)例，并定義路由規(guī)則?？梢栽陧?xiàng)目的 main.js 文件中創(chuàng)建路由實(shí)例，例如：

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'const router = createRouter({history: createWebHistory(),routes: [{ path: '/', component: Home },{ path: '/about', component: About }]
})createApp(App).use(router).mount('#app')

1. 配置路由規(guī)則：在路由實(shí)例中，通過 routes 屬性配置路由規(guī)則。每個(gè)路由規(guī)則都包含 path 和 component 屬性，分別表示路由路徑和對應(yīng)的組件。
2. 在組件中使用路由：在需要使用路由的組件中，可以通過 <router-link> 標(biāo)簽實(shí)現(xiàn)頁面的導(dǎo)航，也可以通過 <router-view> 標(biāo)簽來展示當(dāng)前路由所對應(yīng)的組件。

這是一個(gè)簡單的 Vue Router 配置示例，具體的配置和使用可以根據(jù)實(shí)際需求進(jìn)行調(diào)整和擴(kuò)展。更多關(guān)于 Vue Router 的詳細(xì)信息和用法，可以參考 Vue Router 的官方文檔。

對上述創(chuàng)建路由代碼進(jìn)行的解釋

當(dāng)解析第二段代碼時(shí)，我們會一行一行地解析其含義和功能：

1. import { createApp } from 'vue'：從 Vue 模塊中導(dǎo)入 createApp 方法，用于創(chuàng)建 Vue 應(yīng)用實(shí)例。
2. import App from './App.vue'：從當(dāng)前目錄下的 App.vue 文件中導(dǎo)入默認(rèn)導(dǎo)出的組件，該組件將作為整個(gè)應(yīng)用的根組件。
3. import { createRouter, createWebHistory } from 'vue-router'：從 vue-router 模塊中導(dǎo)入 createRouter 和 createWebHistory 方法，用于創(chuàng)建 Vue Router 實(shí)例和路由的歷史模式。
4. import Home from './views/Home.vue'：從當(dāng)前目錄下的 views 文件夾中導(dǎo)入 Home.vue 組件，用于配置路由規(guī)則中的首頁路徑對應(yīng)的組件。
5. import About from './views/About.vue'：從當(dāng)前目錄下的 views 文件夾中導(dǎo)入 About.vue 組件，用于配置路由規(guī)則中的 “about” 路徑對應(yīng)的組件。
6. const router = createRouter({ history: createWebHistory(), routes: [ ... ] })：使用 createRouter 方法創(chuàng)建路由實(shí)例。createWebHistory() 方法用于創(chuàng)建路由的歷史模式，routes 屬性用于配置路由規(guī)則。在上述示例中，routes 數(shù)組定義了兩個(gè)路由規(guī)則，分別是首頁路徑 '/' 對應(yīng)的 Home 組件，以及 “about” 路徑 '/about' 對應(yīng)的 About 組件。
7. createApp(App).use(router).mount('#app')：使用 createApp 方法創(chuàng)建 Vue 應(yīng)用實(shí)例，并通過 use 方法使用剛創(chuàng)建的路由實(shí)例。最后，通過 mount('#app') 方法將應(yīng)用實(shí)例掛載到 id 為 app 的 HTML 元素上。

這樣，我們就完成了簡單的 Vue Router 的配置，應(yīng)用實(shí)例和路由實(shí)例已經(jīng)創(chuàng)建并成功掛載到了網(wǎng)頁上。在使用 <router-link> 和 <router-view> 標(biāo)簽時(shí)，Vue Router 將會根據(jù)路由規(guī)則進(jìn)行頁面導(dǎo)航和組件展示。