Vue Router是一個(gè)官方的Vue.js路由管理器，它與 Vue.js 核心深度集成，通過(guò)它可以輕松地為單頁(yè)應(yīng)用程序（SPA）提供路由管理和導(dǎo)航功能。今天我們就來(lái)聊一聊Vue 3中使用Vue Router的那些事兒。

安裝和配置Vue Router

安裝Vue Router

安裝Vue Router只需要在vue項(xiàng)目中打開(kāi)終端，輸入如下命令即可安裝：

npm 方式安裝

npm install vue-router@4

yarn方式安裝

yarn add vue-router@4

配置Vue Router

為了便于我們后面代碼維護(hù)和管理，我們一般將路由相關(guān)的代碼統(tǒng)一放到一個(gè)文件夾中。因此，配置Vue Router的步驟如下：

1. 在src文件夾新建一個(gè)router文件夾，在該文件夾下新建index.js文件
2. 在index.js中引入vue-router中的createRouter 和 createWebHashHistory 方法，引入頁(yè)面文件

import { createRouter,createWebHashHistory } from "vue-router";
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import List from '../views/List.vue'
import Detail from '../views/Detail.vue'

3. 在index.js中定義一個(gè)routes數(shù)組，在里面定義路由規(guī)則

const routes = [{path:'/home',name:Home,component:Home},{path:'/about',component:About},{path:'/list',component:List},{path:'/detail',component:Detail},{path:'/',redirect:'/home'}
]

4. 在index.js中使用createRouter創(chuàng)建路由實(shí)例，并配置路由模式和上面定義的路由規(guī)則

const router = createRouter({history:createWebHashHistory(),routes
})

5. 在index.js的最后，使用export default 將上面創(chuàng)建的路由實(shí)例導(dǎo)出

export default router

6. 注冊(cè)路由：在main.js中導(dǎo)入上面創(chuàng)建的路由文件，并使用app.use注冊(cè)路由

import router from './router'
const app = createApp(App)
app.use(router) //注冊(cè)路由
app.mount('#app')

7. 在組件中使用路由組件
   在App.vue中使用<router-view>組件來(lái)渲染要顯示的組件，在Tabbar組件中使用<router-link>組件生成鏈接

App.vue組件中代碼

<template><Title></Title><router-view></router-view><Tabbar></Tabbar>
</template>
<script setup>
import Tabbar from './components/Tabbar.vue'; 
import Title from './components/Title.vue'; </script>
<style scoped>
</style>

Tabbar組件中代碼

<template><div><router-link to="/">Home</router-link><router-link to="/list">List</router-link><router-link to="/about">About</router-link></div></template>
<script setup>
</script>
<style  scoped>
div {position: fixed;bottom: 0;width: 100%;height: 50px;line-height: 50px;text-align: center;display: flex;justify-content: space-around;
}
</style>

至此，我們就完成了路由的配置與搭建，運(yùn)行程序，刷新瀏覽器，可以看到頁(yè)面已經(jīng)可以正常跳轉(zhuǎn)，實(shí)現(xiàn)了路由功能。

雖然上面我們已經(jīng)實(shí)現(xiàn)了一個(gè)完整的路由場(chǎng)景搭建，但是我們還是要對(duì)Vue Router的基礎(chǔ)知識(shí)進(jìn)行深入的了解，方便我們更好的理解和使用Vue Router。下面對(duì)Vue Router中的一些基本概念進(jìn)行介紹。

Vue Router的基本概念

1. 路由器：Vue Router 提供了一個(gè)路由器，用于管理應(yīng)用程序中的路由。Vue Router 實(shí)例化一個(gè) Vue Router 對(duì)象，注冊(cè)路由規(guī)則，并以它為中心連接其他組件。

2. 路由：路由是分發(fā)到不同組件的 URL 地址。在 Vue Router 中，路由通常是由 path 規(guī)則和相應(yīng)的組件定義的。當(dāng)瀏覽器的 URL 匹配到路由的 path 后，相應(yīng)的組件將會(huì)被加載到頁(yè)面中。路由的信息可以從 route 對(duì)象中獲取。

3. 路由規(guī)則：路由規(guī)則是由 path、component、name、meta、props 等屬性組成的。其中，path 表示 URL 的路徑，component 表示要渲染的組件，name 表示路由名稱，meta 表示路由的元數(shù)據(jù)，props 表示路由 props 數(shù)據(jù)。路由規(guī)則可以注冊(cè)到 Vue Router 中。

4. 導(dǎo)航守衛(wèi)：導(dǎo)航守衛(wèi)是在路由跳轉(zhuǎn)時(shí)執(zhí)行的鉤子函數(shù)，用于控制路由的訪問(wèn)權(quán)限、處理路由跳轉(zhuǎn)前后的邏輯等。在 Vue Router 中，對(duì)于選項(xiàng)式 API，常用的導(dǎo)航守衛(wèi)有 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 等；對(duì)于使用組合 API 和 setup 函數(shù)來(lái)編寫(xiě)組件的，可以通過(guò) onBeforeRouteUpdate 和 onBeforeRouteLeave 分別添加 update 和 leave 守衛(wèi)。

Vue Router 的配置項(xiàng)介紹

我們?cè)谑褂肰ue Router 中的createRouter創(chuàng)建router對(duì)象時(shí)，其為我們提供了很多配置項(xiàng)，帶完整配置項(xiàng)的示例代碼如下：

const router = createRouter({history: createWebHashHistory(),routes: [],scrollBehavior: () => ({ top: 0, left: 0 }),linkActiveClass: 'active',linkExactActiveClass: 'exact-active',parseQuery: null,stringifyQuery: null,fallback: true
})

上面代碼中各個(gè)配置項(xiàng)的含義如下：

1. history：指定路由的 history 模式，目前支持 createWebHistory()和 createWebHashHistory()模式。

2. routes：定義路由規(guī)則的數(shù)組，每一個(gè)路由規(guī)則都是一個(gè)對(duì)象，包含 path、name、component 和 meta 等屬性。

3. scrollBehavior：指定路由切換時(shí)滾動(dòng)行為的配置函數(shù)。該函數(shù)返回一個(gè)包含 x 和 y 屬性的對(duì)象，表示頁(yè)面跳轉(zhuǎn)后滾動(dòng)的位置。

4. linkActiveClass：指定激活狀態(tài)的鏈接的 class 名稱，默認(rèn)為 'router-link-active'。

5. linkExactActiveClass：指定精確匹配的激活狀態(tài)的鏈接的 class 名稱，默認(rèn)為 'router-link-exact-active'。

6. parseQuery 和 stringifyQuery：用于配置路由的查詢參數(shù)解析和序列化函數(shù)。通常情況下，我們不需要額外配置這兩個(gè)函數(shù)，因?yàn)?Vue Router 已經(jīng)提供了默認(rèn)的實(shí)現(xiàn)。

7. fallback：用于配置是否開(kāi)啟 HTML5 History 模式的回退機(jī)制。默認(rèn)值為 true，表示當(dāng)路由不匹配時(shí)，將自動(dòng)回退到歷史記錄中的上一個(gè)路由。

上面的配置項(xiàng)中，我們一般只需要配置history和routes兩個(gè)選項(xiàng)就可以了，其它選項(xiàng)了解即可

routes中的配置項(xiàng)介紹

在 Vue Router 中，路由規(guī)則的配置是通過(guò) routes 屬性來(lái)實(shí)現(xiàn)的。routes 屬性中常用的配置如下：

1. name：路由規(guī)則的名字?？梢杂糜诰幊淌綄?dǎo)航和組件內(nèi)部的路由跳轉(zhuǎn)。

2. path：路由的路徑，可以包含動(dòng)態(tài)參數(shù)和正則表達(dá)式。例如，/user/:id 表示用戶頁(yè)面，:id 是一個(gè)動(dòng)態(tài)參數(shù)。

3. redirect：路由的重定向規(guī)則。例如，{ path: '/', redirect: '/home' } 表示路由根路徑的重定向。

4. component：路由對(duì)應(yīng)的組件?？梢允且粋€(gè)普通的組件類或異步加載的組件。

5. children：當(dāng)前路由的子路由。可以是一個(gè)路由規(guī)則數(shù)組，也可以是一個(gè)函數(shù)，動(dòng)態(tài)生成路由規(guī)則。

6. meta：路由的元信息，用于描述路由的一些額外信息。例如，路由是否需要登錄、權(quán)限鑒定等。

7. components：路由對(duì)應(yīng)的多個(gè)命名視圖組件。

路由跳轉(zhuǎn)

通過(guò)Vue Router，我們可以通過(guò)router-link組件的to方法和使用router.push函數(shù)以編程方式兩種方法導(dǎo)航到路由。

使用 router-link組件

使用router-link組件實(shí)現(xiàn)路由跳轉(zhuǎn)，我們只需要將菜單按鈕使用router-link組件包裹，并在上面使用to方法即可進(jìn)行跳轉(zhuǎn)，示例代碼如下：

<div><router-link to="/">Home</router-link><router-link to="/list">List</router-link><router-link to="/about">About</router-link>
</div>

使用router.push函數(shù)

使用router.push函數(shù)以編程方式實(shí)現(xiàn)路由跳轉(zhuǎn)，我們只需要在普通按鈕上綁定click事件，并在事件中調(diào)用router.push()方法即可實(shí)現(xiàn)跳轉(zhuǎn)，示例代碼如下:

<template><div><router-link to="/">Home</router-link><router-link to="/list">List</router-link><router-link to="/about">About</router-link><button @click="gotoAbout"> 關(guān)于 </button></div></template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const gotoAbout = () => {router.push('/about')
}
</script>

使用 router.push 方法會(huì)向 history 棧添加一個(gè)新的記錄，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)，會(huì)回到之前的 URL。

事實(shí)上，當(dāng)我們點(diǎn)擊 <router-link> 時(shí)，Vue Router 內(nèi)部會(huì)調(diào)用這個(gè)方法，所以點(diǎn)擊 <router-link :to="..."> 相當(dāng)于調(diào)用 router.push(...)

router.push()方法中的參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象。

// 字符串路徑
router.push('/users/eduardo')// 帶有路徑的對(duì)象
router.push({ path: '/users/eduardo' })// 命名的路由，并加上參數(shù)，讓路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })// 帶查詢參數(shù)，結(jié)果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })// 帶 hash，結(jié)果是 /about#team
router.push({ path: '/about', hash: '#team' })

路由傳參

在Vue Router中，可以通過(guò)以下方式進(jìn)行路由傳參和獲取參數(shù)

1. 通過(guò)路由路徑傳遞參數(shù)：在路由配置中使用動(dòng)態(tài)路由匹配（Dynamic Route Matching），例如：

const routes= [{path: '/detail/:id',name: 'Detail',component: Detail}]

在路由路徑中使用冒號(hào)表示參數(shù)，參數(shù)值會(huì)被放入route.params對(duì)象中。我們可以通過(guò)調(diào)用route.params獲取參數(shù)，如訪問(wèn)地址為/detail/123，則我們可以通過(guò)route.params.id獲取值為"123"。

2. 通過(guò)query參數(shù)傳遞參數(shù)：在路由跳轉(zhuǎn)時(shí)使用query參數(shù)，例如：

// 在組件中跳轉(zhuǎn)
router.push({path: '/detail',query: { id: 123 }
})// 在模板中跳轉(zhuǎn)
<router-link to="/detail?id=123">Detail</router-link>

在路由中使用query參數(shù)時(shí)，參數(shù)值會(huì)被放入route.query對(duì)象中。我們可以通過(guò)route.query獲取參數(shù)。例如，訪問(wèn)地址為/detail?id=123，則我們可以通過(guò)route.query.id獲取值為"123"。

3. 在路由配置中通過(guò)props選項(xiàng)傳遞參數(shù)。例如：

const routes= [{path: '/detail/:id',name: 'Detail',component: Detail,props: { id: 123 }}]

在組件中可以直接使用props接收參數(shù)

4. 在路由配置中通過(guò)meta選項(xiàng)傳遞參數(shù)。例如：

const routes= [{path: '/detail/:id',name: 'Detail',component: Detail,meta: { id: 123 }}]

在組件中可以通過(guò)route.meta獲取參數(shù)，

動(dòng)態(tài)路由

動(dòng)態(tài)路由是指將一個(gè)路由的一部分作為參數(shù)來(lái)構(gòu)建的路由。例如，如果我們要為每個(gè)用戶創(chuàng)建一個(gè)單獨(dú)的頁(yè)面，我們可以使用動(dòng)態(tài)路由，創(chuàng)建一個(gè)路徑為/users/:userId的路由，其中:userId是一個(gè)參數(shù)。

動(dòng)態(tài)路由在定義路由時(shí)使用冒號(hào)（:）來(lái)表示參數(shù)。定義動(dòng)態(tài)路由需要使用path方式定義。例如，要定義一個(gè)動(dòng)態(tài)路由，我們可以這樣寫(xiě)：

{path: '/users/:userId',name: 'user',component: User
}

在上面的代碼中，路徑中的:userId表示一個(gè)參數(shù)，它可以從路由對(duì)象的params屬性中獲取。在組件中可以這樣讀取userId：

console.log(route.params.userId)

在使用動(dòng)態(tài)路由時(shí)，Vue Router還支持使用可選的參數(shù)和正則表達(dá)式來(lái)定義路由。例如，可以這樣定義一個(gè)包含可選參數(shù)的動(dòng)態(tài)路由：

{path: '/users/:userId/:postId?',name: 'post',component: Post
}

在上面的代碼中，路徑中的postId參數(shù)是可選的，我們?cè)谒竺婕右粋€(gè)問(wèn)號(hào)代表可選參數(shù)?，F(xiàn)在，如果路徑是/users/123，那么postId將是undefined；如果路徑是/users/123/456，那么postId將是456。

嵌套路由

嵌套路由允許我們?cè)谝粋€(gè)父級(jí)路由下嵌套多個(gè)子路由，從而形成更加復(fù)雜的頁(yè)面結(jié)構(gòu)。

要定義嵌套路由，我們可以在父級(jí)路由的routes數(shù)組中定義一個(gè)子路由對(duì)象數(shù)組，每個(gè)子路由對(duì)象都包含一個(gè)path和一個(gè)component屬性，表示當(dāng)前子路由的訪問(wèn)路徑和對(duì)應(yīng)的組件。同時(shí)，我們還可以在子路由對(duì)象中定義子路由的子路由，從而形成嵌套的路由結(jié)構(gòu)。

我們使用配置項(xiàng)children表示路由的嵌套關(guān)系，如下示例代碼：

const routes = [{path: '/',component: Home,children: [{path: 'about',component: About},{path: 'contact',component: Contact}]}]

在上面的代碼中，我們定義了一個(gè)名為Home的組件作為父級(jí)路由的組件，并在children數(shù)組中定義了兩個(gè)子路由：About和Contact。這樣，當(dāng)用戶訪問(wèn)/about或/contact時(shí)，Vue Router 就會(huì)渲染對(duì)應(yīng)的子組件，并將其嵌套在Home組件內(nèi)。

命名路由

命名路由可以為路由設(shè)置一個(gè)名稱，以便在代碼中進(jìn)行引用和跳轉(zhuǎn)。使用命名路由可以讓代碼更加清晰易懂，尤其是在需要跳轉(zhuǎn)到具有動(dòng)態(tài)參數(shù)的路由時(shí)。

要定義命名路由，我們可以在路由對(duì)象中使用name屬性來(lái)指定路由的名稱，例如：

const routes = [{path: '/',name: 'home',component: Home},{path: '/about',name: 'about',component: About},{path: '/user/:id',name: 'user',component: User}]

在上面的代碼中，我們?yōu)槿齻€(gè)路由分別指定了名稱：home、about和user。然后，在代碼中，我們可以通過(guò)這些名稱來(lái)生成對(duì)應(yīng)的路由鏈接或路由跳轉(zhuǎn)，例如：

<router-link :to="{name: 'home'}">Home</router-link><router-link :to="{name: 'about'}">About</router-link><router-link :to="{name: 'user', params: {id: '123'}}">User 123</router-link>router.push({name: 'home'})router.push({name: 'user', params: {id: '456'}})

在上面的代碼中，我們分別使用了<router-link>組件和router.push()方法來(lái)跳轉(zhuǎn)到具有命名路由的路由。其中，使用params屬性可以動(dòng)態(tài)指定路由中的參數(shù)。

命名路由在需要?jiǎng)討B(tài)傳遞參數(shù)的情況下使用非常方便。

路由守衛(wèi)

路由守衛(wèi)是一種函數(shù)，在路由的各個(gè)階段被調(diào)用，可以用于攔截路由的訪問(wèn)或?qū)β酚蛇M(jìn)行一些操作。我們可以使用路由守衛(wèi)來(lái)控制路由的跳轉(zhuǎn)和訪問(wèn)權(quán)限。

在路由守衛(wèi)中，我們通常會(huì)用到三個(gè)參數(shù)：to、from和next。

• to：表示即將要跳轉(zhuǎn)的目標(biāo)路由對(duì)象，包含路由的路徑、參數(shù)和查詢字符串等信息。

• from：表示當(dāng)前路由對(duì)象，即正在離開(kāi)的路由對(duì)象。

• next：是一個(gè)函數(shù)，用于進(jìn)行路由控制和跳轉(zhuǎn)。當(dāng)調(diào)用next函數(shù)時(shí)，路由會(huì)繼續(xù)向下執(zhí)行。我們可以通過(guò)next函數(shù)來(lái)控制路由的行為，例如渲染組件、跳轉(zhuǎn)路由、取消操作等。

幾種使用next函數(shù)的情況

• next(): 表示繼續(xù)執(zhí)行下一個(gè)路由守衛(wèi)。

• next(false): 表示取消當(dāng)前的路由跳轉(zhuǎn)。

• next('/path'): 表示跳轉(zhuǎn)到指定的路由路徑。

• next(error): 表示在路由跳轉(zhuǎn)過(guò)程中發(fā)生了錯(cuò)誤，例如權(quán)限不足等。

需要注意的是，在使用路由守衛(wèi)時(shí)，我們需要顯式地調(diào)用next函數(shù)來(lái)控制路由的跳轉(zhuǎn)和功能，否則路由不會(huì)繼續(xù)向下執(zhí)行。在不同的守衛(wèi)中，next函數(shù)的行為和功能也會(huì)有所不同，需要根據(jù)具體的場(chǎng)景進(jìn)行調(diào)用。

Vue Router中的路由守衛(wèi)分為全局路由守衛(wèi)和路由獨(dú)享守衛(wèi)：

全局路由守衛(wèi)

全局路由守衛(wèi)是在整個(gè)應(yīng)用中都生效的守衛(wèi)，可以用于攔截所有的路由操作。在Vue Router@4中，全局守衛(wèi)有三個(gè)：beforeEach、beforeResolve和afterEach。

• beforeEach: 在路由跳轉(zhuǎn)之前執(zhí)行，可以用于進(jìn)行全局的訪問(wèn)控制或重定向跳轉(zhuǎn)等操作。

• beforeResolve: 在路由跳轉(zhuǎn)完成前執(zhí)行，可以用于等待異步路由組件加載完成或在路由跳轉(zhuǎn)前進(jìn)行一些操作。

• afterEach: 在路由跳轉(zhuǎn)完成后執(zhí)行，可以用于對(duì)頁(yè)面進(jìn)行一些操作，例如監(jiān)測(cè)頁(yè)面埋點(diǎn)或修改頁(yè)面標(biāo)題等。

一個(gè)驗(yàn)證用戶是否登錄的路由守衛(wèi)示例代碼如下

router.beforeEach((to, from, next) => {if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })else next()
})

上面代碼中，如果用戶沒(méi)有登錄，則頁(yè)面跳轉(zhuǎn)到Login頁(yè)面，如果已經(jīng)登錄，則執(zhí)行next()跳轉(zhuǎn)

路由獨(dú)享守衛(wèi)

路由獨(dú)享守衛(wèi)僅對(duì)當(dāng)前路由生效，可以用于限制或增強(qiáng)某個(gè)路由的訪問(wèn)權(quán)限。在Vue Router@4中，路由獨(dú)享守衛(wèi)有兩個(gè)：beforeEnter和leaveGuard。

• beforeEnter: 在進(jìn)入當(dāng)前路由之前執(zhí)行，可以用于增強(qiáng)當(dāng)前路由的訪問(wèn)權(quán)限或進(jìn)行相關(guān)操作。

• leaveGuard: 在離開(kāi)當(dāng)前路由之前執(zhí)行，可以用于給用戶提示或進(jìn)行相關(guān)操作。

使用路由守衛(wèi)時(shí)，我們可以在createRouter函數(shù)中進(jìn)行注冊(cè)，例如：

const routes=[{path: '/',component: Home},{path: '/about',component: About,beforeEnter: (to, from, next) => {// 進(jìn)行路由訪問(wèn)控制或相關(guān)操作}}]

路由懶加載

路由懶加載是一種將路由組件按需異步加載的方式，只有當(dāng)路由對(duì)應(yīng)的組件需要使用時(shí)，才會(huì)動(dòng)態(tài)地加載該組件對(duì)應(yīng)的代碼。使用路由懶加載可以優(yōu)化應(yīng)用程序的性能

在Vue Router中使用路由懶加載，我們可以通過(guò)使用import()和動(dòng)態(tài)import()兩種方式來(lái)實(shí)現(xiàn)

使用import()方式實(shí)現(xiàn)懶加載

const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')
const routes = [{path: '/',component: Home},{path: '/about',component: About}]
const router = createRouter({history: createWebHistory(),routes
})

使用動(dòng)態(tài)import()方式實(shí)現(xiàn)懶加載

const routes = [{path: '/',component: () => import('./views/Home.vue')},{path: '/about',component: () => import('./views/About.vue')}
]
const router = createRouter({history: createWebHashHistory(),routes
})

使用Vue Router的注意事項(xiàng)

1. 動(dòng)態(tài)參數(shù)不能有斜桿：當(dāng)使用動(dòng)態(tài)參數(shù)時(shí)，請(qǐng)注意URL不能和動(dòng)態(tài)參數(shù)相同。

2. 導(dǎo)航流程:路由類似于棧，每次路由的跳轉(zhuǎn)都會(huì)被歷史紀(jì)錄中的歷史記錄所記錄。如果你跳轉(zhuǎn)到相同的路由，那么，歷史記錄中的最后幾次都會(huì)被忽略。默認(rèn)情況下，新跳轉(zhuǎn)的路由不會(huì)觸發(fā)路由更新流程，你需要顯式地使用router.push或者router.replace方法來(lái)更新到當(dāng)前路由。

3. 導(dǎo)航被取消：如果你在beforeRouteLeave或beforeRouteUpdate守衛(wèi)中執(zhí)行了異步操作，則必須確保該異步操作已經(jīng)完成并調(diào)用了next(true)以確保導(dǎo)航可以進(jìn)行。

OK，關(guān)于vue3中使用Vue Router的相關(guān)內(nèi)容就聊到這里，有問(wèn)題的小伙伴評(píng)論區(qū)留言，喜歡的小伙伴點(diǎn)贊關(guān)注加收藏哦！！