很多兄弟在使用 Vue3 了，但對(duì) Vue3 的路由卻了解的非常少。甚至只知道基本的跳轉(zhuǎn)和參數(shù)獲取，這樣做一些稍微復(fù)雜的功能肯定不夠用的。最近就把 Vue3 的路由（Vue-Router4）的版本差異和使用場(chǎng)景整理了一下分享給大家。會(huì)的兄弟可以復(fù)習(xí)一下，不會(huì)的兄弟抓緊學(xué)起來(lái)哦！
路由模式
Vue3 中不再使用 new Router() 創(chuàng)建 router ，而是調(diào)用 createRouter 方法：
import { createRouter } from 'vue-router'
const router = createRouter({
// ...
})路由模式 mode 配置改為 history ，屬性值調(diào)整為：
- "history" => createWebHistory()
- "hash" => createWebHashHistory()
- "abstract" => createMemoryHistory()
import { createRouter, createWebHistory } from 'vue-router'
// createWebHashHistory 和 createMemoryHistory (SSR相關(guān)) 同理
createRouter({
history: createWebHistory(),
routes: []
})基礎(chǔ)路徑 base 被作為 createWebHistory 的第一個(gè)參數(shù)進(jìn)行傳遞（其他路由模式也是一樣）：
import { createRouter, createWebHistory } from 'vue-router'
createRouter({
history: createWebHistory('/base-url/'),
routes: []
})路由跳轉(zhuǎn)
使用組件跳轉(zhuǎn)，方式還是和 Vue2 一樣：
<RouterLink to="/user">User</RouterLink>
<RouterLink :to="{ path: '/user', query: { username: 'Jack' } }">User</RouterLink>
<RouterLink :to="{ name: 'user', params: { username: 'Tom' } }">User</RouterLink>
當(dāng)然，最常見(jiàn)的還是編程式導(dǎo)航，這時(shí)候需要引入 useRouter 方法：
import { useRouter } from 'vue-router'
const router = useRouter()
// 字符串路徑
router.push('/user')
// 帶有路徑的對(duì)象
router.push({ path: '/user', query: { username: 'Jack' } })
router.push({ path: '/user', hash: '#team' })
// 帶有命名的對(duì)象
router.push({ name: 'user', query: { username: 'Jack' } })
router.push({ name: 'user', params: { username: 'Tom' } })
router.push({ name: 'user', hash: '#team' })注意：參數(shù) params 不能和 path 一起使用。RouterLink 組件 to 屬性與 router.push() 接受的參數(shù)相同，兩者的規(guī)則也完全相同。
導(dǎo)航守衛(wèi)
全局前置守衛(wèi)
全局前置守衛(wèi)通常用來(lái)做權(quán)限控制，使用 router.beforeEach 即可添加：
const router = createRouter({ ... })
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消導(dǎo)航
return false
})每個(gè)守衛(wèi)方法接收兩個(gè)參數(shù)：
- to：即將進(jìn)入的目標(biāo)路由
- from：當(dāng)前正要離開(kāi)的路由
可以返回的值如下:
- false：取消當(dāng)前的導(dǎo)航。
- true 或 undefined，調(diào)用下一個(gè)守衛(wèi)。
- 一個(gè)路由地址：字符串或?qū)ο蟆１硎局袛喈?dāng)前導(dǎo)航，進(jìn)行一個(gè)新的導(dǎo)航。
router.beforeEach(async (to, from) => {
// 檢查用戶是否已登錄，并且避免無(wú)限重定向
if (!isAuthenticated && to.name !== 'Login') {
return { name: 'Login' } // 將用戶重定向到登錄頁(yè)面
}
})在之前的 Vue Router 版本中，也是可以使用第三個(gè)參數(shù) next 的。目前，它仍然是被支持的，這意味著你可以向任何導(dǎo)航守衛(wèi)傳遞第三個(gè)參數(shù)。在這種情況下，要確保 next 在導(dǎo)航守衛(wèi)中只被調(diào)用一次。
全局解析守衛(wèi)
router.beforeResolve 用法和 router.beforeEach 類似。它是在導(dǎo)航被確認(rèn)之前，所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后被調(diào)用。下面這個(gè)例子，確保用戶可以訪問(wèn)自定義 meta 屬性：
router.beforeResolve(async to => {
if (to.meta.requiresCamera) {
try {
await askForCameraPermission()
} catch (error) {
if (error instanceof NotAllowedError) {
// ... 處理錯(cuò)誤，然后取消導(dǎo)航
return false
} else {
// 意料之外的錯(cuò)誤，取消導(dǎo)航并把錯(cuò)誤傳給全局處理器
throw error
}
}
}
})router.beforeResolve 是獲取數(shù)據(jù)或執(zhí)行任何其他操作（進(jìn)入所有頁(yè)面后都執(zhí)行的操作）的理想位置。
全局后置鉤子
和守衛(wèi)不同的是，全局后置鉤子不接受 next 函數(shù)，也不能跳轉(zhuǎn)到其他的路由地址：
router.afterEach((to, from) => {
sendToAnalytics(to.fullPath)
})但它可以接收 failure 作為第三個(gè)參數(shù)：
router.afterEach((to, from, failure) => {
if (!failure) sendToAnalytics(to.fullPath)
})router.afterEach 對(duì)于訪問(wèn)分析、更改頁(yè)面標(biāo)題、聲明頁(yè)面等輔助功能都很有幫助。
路由獨(dú)享的守衛(wèi)
我們可以直接在路由配置上定義 beforeEnter 守衛(wèi)：
const routes = [
{
path: '/users/:id',
component: UserDetails,
beforeEnter: (to, from) => {
// 取消導(dǎo)航
return false
},
},
]
beforeEnter 守衛(wèi)只在進(jìn)入路由時(shí)觸發(fā)，不會(huì)在 params、query 或 hash 改變時(shí)觸發(fā)。例如，從 /users/2 進(jìn)入到 /users/3 或者從 /users/2#info 進(jìn)入到 /users/2#projects 不會(huì)觸發(fā)。
我們也可以將一個(gè)函數(shù)數(shù)組傳遞給 beforeEnter，這在為不同的路由重用守衛(wèi)時(shí)很有用：
// 清除 query 參數(shù)
function removeQueryParams(to) {
if (Object.keys(to.query).length)
return { path: to.path, query: {}, hash: to.hash }
}
// 清除 hash 值
function removeHash(to) {
if (to.hash) return { path: to.path, query: to.query, hash: '' }
}
const routes = [
{
path: '/users/:id',
component: UserDetails,
beforeEnter: [removeQueryParams, removeHash]
},
{
path: '/about',
component: UserDetails,
beforeEnter: [removeQueryParams]
}
]
當(dāng)然，你也可以通過(guò)使用路由的 meta 屬性和 全局導(dǎo)航守衛(wèi) 來(lái)實(shí)現(xiàn)以上功能。
組件內(nèi)的守衛(wèi)
使用聲明式 API ，你可以為組件添加以下守衛(wèi)：
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
beforeRouteEnter 守衛(wèi)不能訪問(wèn) this，因?yàn)榇藭r(shí)組件還沒(méi)有被創(chuàng)建。你可以通過(guò)傳一個(gè)回調(diào)給 next 來(lái)訪問(wèn)組件實(shí)例。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)，并且把組件實(shí)例作為回調(diào)方法的參數(shù)：
beforeRouteEnter (to, from, next) {
next(vm => {
// 通過(guò) `vm` 訪問(wèn)組件實(shí)例
})
}注意：beforeRouteEnter 是支持 next 傳遞回調(diào)函數(shù)的唯一守衛(wèi)。
beforeRouteUpdate 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用。比如，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /users/:id，在 /users/1 和 /users/2 之間跳轉(zhuǎn)的時(shí)候被調(diào)用。因?yàn)檫@種情況發(fā)生的時(shí)候，組件已經(jīng)掛載好了，導(dǎo)航守衛(wèi)可以訪問(wèn)組件實(shí)例 this。
beforeRouteUpdate (to, from) {
// 可以使用 this
this.name = to.params.name
}beforeRouteLeave 通常用來(lái)預(yù)防用戶在還未保存修改前突然離開(kāi)。該守衛(wèi)可以通過(guò)返回 false 來(lái)取消導(dǎo)航。
beforeRouteLeave (to, from) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
// 取消導(dǎo)航并停留在當(dāng)前頁(yè)面
if (!answer) return false
}使用組合式 API，你可以為組件添加 onBeforeRouteUpdate 、onBeforeRouteLeave 導(dǎo)航守衛(wèi)：
<script setup lang="ts">
import { ref } from 'vue'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
const userData = ref()
onBeforeRouteUpdate(async (to, from) => {
//僅當(dāng) id 更改時(shí)才獲取用戶信息
if (to.params.id !== from.params.id) {
userData.value = await fetchUser(to.params.id)
}
})
onBeforeRouteLeave((to, from) => {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
// 取消導(dǎo)航并停留在當(dāng)前頁(yè)面
if (!answer) return false
})
</script>
注意：由于 setup 函數(shù)調(diào)用時(shí)機(jī)的問(wèn)題，使用組合式 API 不存在 onBeforeRouteEnter。
路由組件傳參
當(dāng)我們獲取路由參數(shù)時(shí)，通常在模板中使用 $route ，在邏輯中調(diào)用 useRoute() 方法，如：
<template>
<div>User {{ $route.params.id }}</div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)
</script>
以上方法比較麻煩，而且與路由緊密耦合，不利于組件封裝。我們可以在創(chuàng)建路由時(shí)通過(guò) props 配置來(lái)解除這種行為：
const routes = [
{
path: '/user/:id',
name: 'user',
component: User,
props: true
}
]
此時(shí) route.params 將直接被設(shè)置為組件的 props，這樣組件就和路由參數(shù)解耦了：
<template>
<div>User {{ id }}</div>
</template>
<script setup lang="ts">
const props = defineProps<{
id: string
}>()
console.log(props.id)
</script>
布爾模式
當(dāng) props 設(shè)置為 true 時(shí)，route.params 將被設(shè)置為組件的 props。
命名視圖
對(duì)于有命名視圖的路由，你必須為每個(gè)命名視圖定義 props 配置：
const routes = [
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
對(duì)象模式
當(dāng) props 是一個(gè)對(duì)象時(shí)，它會(huì)將此對(duì)象設(shè)置為組件 props 。當(dāng) props 是靜態(tài)的時(shí)候很有用。
const routes = [
{
path: '/user',
component: User,
props: { newsletterPopup: false }
}
]
函數(shù)模式
我們也可以創(chuàng)建一個(gè)返回 props 的函數(shù)。這允許你將參數(shù)轉(zhuǎn)換為其他類型：
const routes = [
{
path: '/user',
component: User,
props: route => ({ id: route.query.userId })
}
]
如 /user?userId=123 參數(shù)會(huì)被轉(zhuǎn)為 { id: '123' } 作為 props 傳給 User 組件。
滾動(dòng)行為
我們可以通過(guò) vue-router 自定義路由切換時(shí)頁(yè)面如何滾動(dòng)。比如，當(dāng)跳轉(zhuǎn)到新路由時(shí)，頁(yè)面滾動(dòng)到某個(gè)位置；切換路由時(shí)頁(yè)面回到之前的滾動(dòng)位置。
當(dāng)創(chuàng)建路由實(shí)例時(shí)，我們只需要提供一個(gè) scrollBehavior 方法：
const router = createRouter({
history: createWebHashHistory(),
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滾動(dòng)到哪個(gè)的位置
}
})scrollBehavior 函數(shù)接收 to和 from 路由對(duì)象。第三個(gè)參數(shù) savedPosition，只有當(dāng)這是一個(gè) popstate 導(dǎo)航時(shí)才可用（點(diǎn)擊瀏覽器的后退/前進(jìn)按鈕，或者調(diào)用 router.go() 方法）。
滾動(dòng)到固定距離
該函數(shù)可以返回一個(gè) ScrollToOptions 位置對(duì)象：
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
// 始終滾動(dòng)到頂部
return { top: 0 }
},
})滾動(dòng)到元素位置
也可以通過(guò) el 傳遞一個(gè) CSS 選擇器或一個(gè) DOM 元素。在這種情況下，top 和 left 將被視為該元素的相對(duì)偏移量。
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
// 始終在元素 #main 上方滾動(dòng) 10px
return {
// 也可以這么寫(xiě)
// el: document.getElementById('main'),
el: '#main',
top: -10,
}
},
})滾動(dòng)到錨點(diǎn)位置
還可以模擬 “滾動(dòng)到錨點(diǎn)” ：
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return {
el: to.hash,
}
}
},
})滾動(dòng)到之前的位置
返回 savedPosition，在按下瀏覽器 后退/前進(jìn) 按鈕，或者調(diào)用 router.go() 方法時(shí)，頁(yè)面會(huì)回到之前的滾動(dòng)位置：
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
}
},
})提示：如果返回一個(gè) falsy 的值，或者是一個(gè)空對(duì)象，則不會(huì)發(fā)生滾動(dòng)。我們還可以在返回的對(duì)象中添加 behavior: 'smooth' ，讓滾動(dòng)更加絲滑。
延遲滾動(dòng)
有時(shí)候，我們不希望立即執(zhí)行滾動(dòng)行為。例如，當(dāng)頁(yè)面做了過(guò)渡動(dòng)效，我們希望過(guò)渡結(jié)束后再執(zhí)行滾動(dòng)。要做到這一點(diǎn)，我們可以返回一個(gè) Promise ：
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ left: 0, top: 0 })
}, 500)
})
}
})過(guò)渡動(dòng)效
基本用法
如果想要在路由組件上使用轉(zhuǎn)場(chǎng)，對(duì)導(dǎo)航進(jìn)行動(dòng)畫(huà)處理，我可以使用 v-slot 結(jié)合 Animete.css 來(lái)實(shí)現(xiàn)：
<RouterView v-slot="{ Component }">
<transition enter-active-class="animate__animated animate__fadeIn">
<component :is="Component" />
</transition>
</RouterView>單個(gè)路由的過(guò)渡
上面的用法會(huì)對(duì)所有的路由使用相同的過(guò)渡。如果你想讓每個(gè)路由的組件有不同的過(guò)渡，可以將 元信息 和動(dòng)態(tài)的 enter-active-class 結(jié)合在一起，放在<transition> 上：
const routes = [
{
path: '/home',
component: Home,
meta: { transition: 'animate__fadeIn' },
},
{
path: '/user',
component: User,
meta: { transition: 'animate__bounceIn' },
},
]
<RouterView v-slot="{ Component }">
<transition :enter-active-class="`animate__animated ${$route.meta.transition}`">
<component :is="Component" />
</transition>
</RouterView>復(fù)用的組件之前進(jìn)行過(guò)渡
const routes = [
{
path: '/user/:id',
component: User,
meta: { transition: 'animate__bounceIn' },
},
]
定義以上路由，當(dāng)從 /user/123 切換到 /user/456 時(shí)是沒(méi)有任何過(guò)渡效果的。這時(shí)候我們可以添加一個(gè) key 屬性來(lái)強(qiáng)制進(jìn)行過(guò)渡，key 值只要不同就行了。說(shuō)白了就是讓 Dom 不要被復(fù)用，和 v-for 的 key 屬性原理剛好相反。
<router-view v-slot="{ Component, route }">
<transition :enter-active-class="`animate__animated ${$route.meta.transition}`">
<component :is="Component" :key="route.path" />
</transition>
</router-view>動(dòng)態(tài)路由
添加路由
當(dāng)我們做用戶權(quán)限的時(shí)候，添加路由非常有用?？梢允褂?nbsp;router.addRoute() 來(lái)添加一個(gè)路由：
router.addRoute({ path: '/about', name: 'about', component: About })注意：跟之前版本不同的是，路由只能一個(gè)一個(gè)添加，不能批量添加。
刪除路由
以下幾個(gè)方法都可以刪除路由：
1、通過(guò)使用 router.removeRoute() 按名稱刪除路由：
router.addRoute({ path: '/about', name: 'about', component: About })
// 刪除路由
router.removeRoute('about')2、通過(guò)添加一個(gè)名稱相同的路由，替換掉之前的路由：
router.addRoute({ path: '/about', name: 'about', component: About })
// 這將會(huì)刪除之前已經(jīng)添加的路由，因?yàn)樗麄兙哂邢嗤拿智颐直仨毷俏ㄒ坏?/span>
router.addRoute({ path: '/other', name: 'about', component: Other })3、通過(guò)調(diào)用 router.addRoute() 返回的回調(diào)函數(shù)：
const removeRoute = router.addRoute(routeRecord)
removeRoute() // 刪除路由如果存在的話
當(dāng)路由沒(méi)有名稱時(shí)，這種方法非常有用。
添加嵌套路由
要將嵌套路由添加到現(xiàn)有的路由中，可以將路由的 name 作為第一個(gè)參數(shù)傳遞給 router.addRoute() ，這和通過(guò) children 添加的效果一樣：
router.addRoute({ name: 'admin', path: '/admin', component: Admin })
// 添加嵌套路由
router.addRoute('admin', { path: 'settings', component: AdminSettings })這相當(dāng)于：
router.addRoute({
name: 'admin',
path: '/admin',
component: Admin,
children: [{ path: 'settings', component: AdminSettings }]
})小結(jié)
今天把 Vue-Router4 的主要功能跟大家過(guò)了一遍，大部分來(lái)自官網(wǎng)，也有一些來(lái)自自己的實(shí)踐心得。希望對(duì)你的開(kāi)發(fā)工作有所幫助。當(dāng)然這并不是 Vue-Router4 的所有內(nèi)容，比如還有路由匹配、重定向和別名等等，大家可以自行在官網(wǎng)查看。后面我會(huì)分享更多 Vue3 相關(guān)的干貨，歡迎大家關(guān)注我，關(guān)注我的專欄。
