導(dǎo)航守衛(wèi)
“導(dǎo)航”表示路由正在發(fā)生改變务嫡。
全局前置守衛(wèi)
router.beforeEach
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴 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傳遞任意位置對(duì)象篙悯，且允許設(shè)置諸如replace: true、name: 'home'之類的選項(xiàng)以及任何用在router-link的toprop 或router.push中的選項(xiàng)铃绒。next(error): (2.4.0+) 如果傳入next的參數(shù)是一個(gè)Error實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給router.onError()注冊(cè)過(guò)的回調(diào)螺捐。
全局解析守衛(wèi)
這和 router.beforeEach 類似颠悬，區(qū)別是在導(dǎo)航被確認(rèn)之前，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后定血，解析守衛(wèi)就被調(diào)用赔癌。
router.afterEach((to, from) => {
// ...
})
路由獨(dú)享的守衛(wèi)
你可以在路由配置上直接定義 beforeEnter 守衛(wèi)：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
組件內(nèi)的守衛(wèi)
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
// 不！能澜沟！獲取組件實(shí)例 `this`
// 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前灾票，組件實(shí)例還沒(méi)被創(chuàng)建
},
beforeRouteUpdate (to, from, next) {
// 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
// 舉例來(lái)說(shuō)茫虽，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id刊苍，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
// 由于會(huì)渲染同樣的 Foo 組件濒析，因此組件實(shí)例會(huì)被復(fù)用正什。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
// 可以訪問(wèn)組件實(shí)例 `this`
},
beforeRouteLeave (to, from, next) {
// 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用
// 可以訪問(wèn)組件實(shí)例 `this`
}
}
beforeRouteEnter 守衛(wèi) 不能 訪問(wèn) this号杏，因?yàn)槭匦l(wèi)在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場(chǎng)的新組件還沒(méi)被創(chuàng)建婴氮。
不過(guò)，你可以通過(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)的唯一守衛(wèi)庭惜。對(duì)于 beforeRouteUpdate 和 beforeRouteLeave 來(lái)說(shuō)罩驻，this 已經(jīng)可用了，所以不支持傳遞回調(diào)蜈块，因?yàn)闆](méi)有必要了鉴腻。
路由元信息
meta
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
使用就是 $route.meta.requires
過(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)前路由與目標(biāo)路由的變化關(guān)系器一，動(dòng)態(tài)設(shè)置過(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'
}
}
滾動(dòng)行為
當(dāng)切換到新路由時(shí)课锌，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣渺贤。
scrollBehavior (to, from, savedPosition)
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滾動(dòng)到哪個(gè)的位置
}
})
這個(gè)方法返回滾動(dòng)位置的對(duì)象信息雏胃，長(zhǎng)這樣：
{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)
如果返回一個(gè) falsy，或者是一個(gè)空對(duì)象志鞍，那么不會(huì)發(fā)生滾動(dòng)瞭亮。
路由懶加載
當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件
