vue-router學(xué)習(xí)筆記
安裝
npm install vue-router
并且如果在一個(gè)模塊化工程中使用它，必須要通過(guò)Vue.use()明確地安裝路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
開(kāi)始
HTML中寫(xiě)法示例
<p>
<!-- 使用 router-link 組件來(lái)導(dǎo)航. -->
<!-- 通過(guò)傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
JavaScript中寫(xiě)法示例
// 1. 定義（路由）組件前塔。
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定義路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 創(chuàng)建 router 實(shí)例，然后傳 `routes` 配置
const router = new VueRouter({
routes // （縮寫(xiě)）相當(dāng)于 routes: routes
})
// 4. 創(chuàng)建和掛載根實(shí)例货徙。
// 記得要通過(guò) router 配置參數(shù)注入路由胚委，
// 從而讓整個(gè)應(yīng)用都有路由功能
const app = new Vue({
router
}).$mount('#app')
要注意竹椒，當(dāng)<router-link>對(duì)應(yīng)的路由匹配成功朦促，將自動(dòng)設(shè)置 class 屬性值 .router-link-active膝晾。
動(dòng)態(tài)路由匹配
假如我們有一個(gè)User組件，對(duì)于所有 ID 各不相同的用戶务冕，都要使用這個(gè)組件來(lái)渲染血当。那么，我們可以在vue-router的路由路徑中使用『動(dòng)態(tài)路徑參數(shù)』（dynamic segment）來(lái)達(dá)到這個(gè)效果：
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 動(dòng)態(tài)路徑參數(shù) 以冒號(hào)開(kāi)頭
{ path: '/user/:id', component: User }
]
})
當(dāng)匹配到一個(gè)路由時(shí)洒疚，參數(shù)值會(huì)被設(shè)置到this.$route.params，可以在每個(gè)組件內(nèi)使用坯屿。
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
響應(yīng)路由參數(shù)的變化
當(dāng)使用路由參數(shù)時(shí)油湖，例如從 /user/foo 導(dǎo)航到 user/bar，原來(lái)的組件實(shí)例會(huì)被復(fù)用领跛。因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件乏德，比起銷(xiāo)毀再創(chuàng)建，復(fù)用則顯得更加高效。不過(guò)喊括，這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用胧瓜。
復(fù)用組件時(shí)，想對(duì)路由參數(shù)的變化作出響應(yīng)的話郑什，你可以簡(jiǎn)單地 watch（監(jiān)測(cè)變化） $route 對(duì)象：
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 對(duì)路由變化作出響應(yīng)...
}
}
}
匹配優(yōu)先級(jí)
有時(shí)候府喳，同一個(gè)路徑可以匹配多個(gè)路由，此時(shí)蘑拯，匹配的優(yōu)先級(jí)就按照路由的定義順序：誰(shuí)先定義的钝满，誰(shuí)的優(yōu)先級(jí)就最高。
嵌套路由
一個(gè)被渲染組件同樣可以包含自己的嵌套 <router-view>：
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
要在嵌套的出口中渲染組件申窘，需要在 VueRouter 的參數(shù)中使用 children 配置：
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 當(dāng) /user/:id/profile 匹配成功弯蚜，
// UserProfile 會(huì)被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 當(dāng) /user/:id/posts 匹配成功
// UserPosts 會(huì)被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
要注意，以 / 開(kāi)頭的嵌套路徑會(huì)被當(dāng)作根路徑剃法。 這讓你充分的使用嵌套組件而無(wú)須設(shè)置嵌套的路徑碎捺。
基于上面的配置，當(dāng)你訪問(wèn) /user/foo 時(shí)贷洲，User 的出口是不會(huì)渲染任何東西收厨，這是因?yàn)闆](méi)有匹配到合適的子路由。如果你想要渲染點(diǎn)什么恩脂，可以提供一個(gè) 空的 子路由：
const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
// 當(dāng) /user/:id 匹配成功帽氓，
// UserHome 會(huì)被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome },
// ...其他子路由
]
}
]
})
編程式的導(dǎo)航
想要導(dǎo)航到不同的 URL，則使用 router.push 方法俩块。這個(gè)方法會(huì)向 history 棧添加一個(gè)新的記錄黎休，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)玉凯，則回到之前的 URL势腮。該方法的參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象漫仆。例如：
// 字符串
router.push('home')
// 對(duì)象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢(xún)參數(shù)捎拯，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
注意：如果提供了 path，params 會(huì)被忽略盲厌，上述例子中的 query 并不屬于這種情況署照。取而代之的是下面例子的做法，你需要提供路由的 name 或手寫(xiě)完整的帶有參數(shù)的 path：
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
router.replace跟 router.push 很像吗浩，唯一的不同就是建芙，它不會(huì)向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄懂扼。
命名路由
你可以在創(chuàng)建 Router 實(shí)例的時(shí)候禁荸，在 routes 配置中給某個(gè)路由設(shè)置名稱(chēng):
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
要鏈接到一個(gè)命名路由右蒲，可以給 router-link 的 to 屬性傳一個(gè)對(duì)象：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
命名視圖
你可以在界面中擁有多個(gè)單獨(dú)命名的視圖，而不是只有一個(gè)單獨(dú)的出口赶熟。如果 router-view 沒(méi)有設(shè)置名字瑰妄，那么默認(rèn)為 default：
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
確保正確使用 components 配置（帶上 s）：
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
重定向和別名
重定向
重定向也是通過(guò) routes 配置來(lái)完成，下面例子是從 /a 重定向到 /b：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
別名
和重定向不同映砖，/a 的別名是 /b间坐，意味著，當(dāng)用戶訪問(wèn) /b 時(shí)啊央，URL 會(huì)保持為 /b眶诈，但是路由匹配則為 /a，就像用戶訪問(wèn) /a 一樣：
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
路由組件傳參
在組件中使用$route會(huì)使之與其對(duì)應(yīng)路由形成高度耦合瓜饥，從而使組件只能在某些特定的url上使用逝撬，限制了其靈活性∨彝粒可以使用props將組件和路由解耦宪潮。
導(dǎo)航守衛(wèi)
注意：“導(dǎo)航”表示路由正在發(fā)生改變。
vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航趣苏。
全局守衛(wèi)
你可以使用 router.beforeEach 注冊(cè)一個(gè)全局前置守衛(wèi)：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)狡相，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行食磕，此時(shí)導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中尽棕。
每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：
-
to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象 -
from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由 -
next: Function: 一定要調(diào)用該方法來(lái)resolve這個(gè)鉤子。執(zhí)行效果依賴(lài) next 方法的調(diào)用參數(shù)彬伦。-
next(): 進(jìn)行管道中的下一個(gè)鉤子滔悉。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）单绑。 -
next(false): 中斷當(dāng)前的導(dǎo)航回官。如果瀏覽器的 URL 改變了（可能是用戶手動(dòng)或者瀏覽器后退按鈕），那么 URL 地址會(huì)重置到from路由對(duì)應(yīng)的地址搂橙。 -
next('/')或者next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址歉提。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航区转。 -
next(error): (2.4.0+) 如果傳入next的參數(shù)是一個(gè)Error實(shí)例苔巨，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給router.onError()注冊(cè)過(guò)的回調(diào)。
-
全局后置鉤子
你也可以注冊(cè)全局后置鉤子废离，然而和守衛(wèi)不同的是侄泽，這些鉤子不會(huì)接受 next 函數(shù)也不會(huì)改變導(dǎo)航本身：
router.afterEach((to, from) => {
// ...
})
路由獨(dú)享的守衛(wèi)
你可以在路由配置上直接定義 beforeEnter 守衛(wèi)：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
這些守衛(wèi)與全局前置守衛(wèi)的方法參數(shù)是一樣的。
組件內(nèi)的守衛(wèi)
你可以在路由組件內(nèi)直接定義以下路由導(dǎo)航守衛(wèi)：
beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave
注意：你可以在 beforeRouteLeave 中直接訪問(wèn) this厅缺。這個(gè)離開(kāi)守衛(wèi)通常用來(lái)禁止用戶在還未保存修改前突然離開(kāi)蔬顾。可以通過(guò) next(false) 來(lái)取消導(dǎo)航湘捎。
完整的導(dǎo)航解析流程
- 導(dǎo)航被觸發(fā)诀豁。
- 在失活的組件里調(diào)用離開(kāi)守衛(wèi)。
- 調(diào)用全局的
beforeEach守衛(wèi)窥妇。 - 在重用的組件里調(diào)用
beforeRouteUpdate守衛(wèi) (2.2+)舷胜。 - 在路由配置里調(diào)用
beforeEnter。 - 解析異步路由組件活翩。
- 在被激活的組件里調(diào)用
beforeRouteEnter烹骨。 - 調(diào)用全局的
beforeResolve守衛(wèi) (2.5+)。 - 導(dǎo)航被確認(rèn)材泄。
- 調(diào)用全局的
afterEach鉤子沮焕。 - 觸發(fā) DOM 更新。
- 用創(chuàng)建好的實(shí)例調(diào)用
beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)拉宗。
過(guò)渡動(dòng)效
<router-view> 是基本的動(dòng)態(tài)組件峦树，所以我們可以用 <transition> 組件給它添加一些過(guò)渡效果：
<transition>
<router-view></router-view>
</transition>
單個(gè)路由的過(guò)渡
上面的用法會(huì)給所有路由設(shè)置一樣的過(guò)渡效果，如果你想讓每個(gè)路由組件有各自的過(guò)渡效果旦事，可以在各路由組件內(nèi)使用 <transition> 并設(shè)置不同的 name魁巩。
const Foo = {
template: `
<transition name="slide">
<div class="foo">...</div>
</transition>
`
}
const Bar = {
template: `
<transition name="fade">
<div class="bar">...</div>
</transition>
`
}
基于路由的動(dòng)態(tài)過(guò)渡
<!-- 使用動(dòng)態(tài)的 transition name -->
<transition :name="transitionName">
<router-view></router-view>
</transition>
// 接著在父組件內(nèi)
// watch $route 決定使用哪種過(guò)渡
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
數(shù)據(jù)獲取
有時(shí)候，進(jìn)入某個(gè)路由后姐浮，需要從服務(wù)器獲取數(shù)據(jù)谷遂。例如，在渲染用戶信息時(shí)卖鲤，你需要從服務(wù)器獲取用戶的數(shù)據(jù)肾扰。我們可以通過(guò)兩種方式來(lái)實(shí)現(xiàn)：
- 導(dǎo)航完成之后獲取：先完成導(dǎo)航，然后在接下來(lái)的組件生命周期鉤子中獲取數(shù)據(jù)扫尖。在數(shù)據(jù)獲取期間顯示『加載中』之類(lèi)的指示白对。
- 導(dǎo)航完成之前獲取：導(dǎo)航完成前，在路由進(jìn)入的守衛(wèi)中獲取數(shù)據(jù)换怖，在數(shù)據(jù)獲取成功后執(zhí)行導(dǎo)航甩恼。
滾動(dòng)行為
當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部沉颂，或者是保持原先的滾動(dòng)位置条摸，就需要用到滾動(dòng)行為：
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滾動(dòng)到哪個(gè)的位置
}
})
scrollBehavior 方法接收 to 和 from 路由對(duì)象。第三個(gè)參數(shù) savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過(guò)瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用铸屉。
這個(gè)方法返回滾動(dòng)位置的對(duì)象信息钉蒲，長(zhǎng)這樣：{ x: number, y: number }
路由懶加載
當(dāng)打包構(gòu)建應(yīng)用時(shí)，Javascript 包會(huì)變得非常大彻坛，影響頁(yè)面加載顷啼。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊踏枣，然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了钙蒙。
這篇學(xué)習(xí)筆記是參考（copy）的vue-router的官方文檔寫(xiě)成的茵瀑，有很多部分內(nèi)容沒(méi)有寫(xiě)進(jìn)了，需要之后在實(shí)踐的過(guò)程中完善躬厌。
