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