Vue Router 是 Vue.js (opens new window) 官方的路由管理器。它和 Vue.js 的核心深度集成聚凹，讓構(gòu)建單頁面應(yīng)用變得易如反掌绿满。
使用
npm install vue-router
如果在一個(gè)模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能坯钦，然后在HTML文件內(nèi)使用<router-link>來導(dǎo)航蟀苛，其中to屬性指向指定導(dǎo)航鏈接益咬，<router-link>會(huì)被渲染為一個(gè)a標(biāo)簽。使用<router-view>來指明路由出口帜平，即將路由匹配到的組件渲染到該位置幽告。當(dāng)<router-link>對應(yīng)的路由匹配成功，將自動(dòng)設(shè)置class屬性.router-link-active
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 創(chuàng)建 router 實(shí)例裆甩，然后傳 `routes` 配置
const router = new VueRouter({
routes // (縮寫) 相當(dāng)于 routes: routes
})
// 4. 創(chuàng)建和掛載根實(shí)例冗锁。
const app = new Vue({
router
}).$mount('#app')
我們可以在任何組件內(nèi)通過 this.$router 訪問路由器，也可以通過 this.$route 訪問當(dāng)前路由
動(dòng)態(tài)路由
動(dòng)態(tài)路由參數(shù)可以使用 : 標(biāo)記嗤栓，比如當(dāng)我們需要編輯不用id的文章時(shí)可以
const User = {
template: '<div>edit</div>'
}
const router = new VueRouter({
routes: [
// 動(dòng)態(tài)路徑參數(shù) 以冒號開頭
{ path: '/edit/:id', component: edit }
]
})
此時(shí)/edit/1和/edit/2都指向相同的路由冻河，其中被 ： 標(biāo)記的路徑參數(shù)可以被this.$route.params獲取到
其中當(dāng)路由參數(shù)改變時(shí)組件會(huì)被復(fù)用，并不是被銷毀后再重新創(chuàng)建茉帅，也就是說組件的生命周期鉤子不會(huì)再次被調(diào)用叨叙。
//通配符用來匹配任意路徑，含有通配符的路由一般放在最后面
{
// 會(huì)匹配所有路徑堪澎，通常用于客戶端 404 錯(cuò)誤
path: '*'
}
{
// 會(huì)匹配以 `/user-` 開頭的任意路徑
path: '/user-*'
}
嵌套路由時(shí)在被嵌套的組件內(nèi)使用router-view來顯示組件擂错，路由配置如下：
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})
路由跳轉(zhuǎn)（path和params同時(shí)使用params不生效）
router.push(location, onComplete?, onAbort?)
想要導(dǎo)航到不同的 URL，則使用 router.push 方法樱蛤。這個(gè)方法會(huì)向 history 棧添加一個(gè)新的記錄钮呀，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)昨凡，則回到之前的 URL行楞。
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
如果跳轉(zhuǎn)到相同的動(dòng)態(tài)路由地址則需要調(diào)用beforeRouteUpdate來響應(yīng)這個(gè)變化，因?yàn)榇藭r(shí)屬于組件被復(fù)用土匀，生命周期鉤子不會(huì)被調(diào)用
router.replace(location, onComplete?, onAbort?)
不會(huì)向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄形用。與<router-link :to="..." replace>作用相同
router.go(n)
this.$router.go(-1) //返回上一級
這個(gè)方法的參數(shù)是一個(gè)整數(shù)就轧，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)田度。
一個(gè)路由需要使用多個(gè)組件時(shí)妒御，需要使用命名router-view
<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>
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
路由重定向
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目標(biāo)還可以是一個(gè)命名路由，也可以是一個(gè)返回路由的方法镇饺。
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// return 重定向的 字符串路徑/路徑對象
}}
]
})
路由組件傳參
使用props將組件與路由解耦
const router = new VueRouter({
routes: [
{
path: '/search',
component: SearchUser,
props: route => ({ query: route.query.q })
}
]
})
此時(shí)會(huì)將query:"vue"作為屬性傳遞給 SearchUser 組件乎莉，query會(huì)附加在域名后。
HTML5 History模式
vue-router默認(rèn)使用hash模式，此外我們還可以使用history模式
const router = new VueRouter({
mode: 'history',
routes: [...]
})
導(dǎo)航守衛(wèi)
vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航惋啃。有多種機(jī)會(huì)植入路由導(dǎo)航過程中：全局的, 單個(gè)路由獨(dú)享的, 或者組件級的哼鬓。
參數(shù)或查詢的改變并不會(huì)觸發(fā)進(jìn)入/離開的導(dǎo)航守衛(wèi)。
全局前置守衛(wèi)
可以通過router.beforeEach來注冊
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)边灭，守衛(wèi)是異步解析執(zhí)行的异希，此時(shí)導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中。
- to: Route: 即將要進(jìn)入的目標(biāo) 路由對象
- from: Route: 當(dāng)前導(dǎo)航正要離開的路由
- next: Function: 一定要調(diào)用該方法來 resolve 這個(gè)鉤子绒瘦。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)称簿。
- next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了惰帽，則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)憨降。
中斷當(dāng)前的導(dǎo)航：next(false)
跳轉(zhuǎn)到一個(gè)不同的地址：next('/') 或者 next({ path: '/' })
確保 next 函數(shù)在任何給定的導(dǎo)航守衛(wèi)中都被嚴(yán)格調(diào)用一次。它可以出現(xiàn)多于一次该酗，但是只能在所有的邏輯路徑都不重疊的情況下授药，否則鉤子永遠(yuǎn)都不會(huì)被解析或報(bào)錯(cuò)
全局解析守衛(wèi)
通過router.beforeResolve注冊，與router.beforeEach的區(qū)別是在導(dǎo)航被確認(rèn)之前垂涯，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后烁焙，解析守衛(wèi)被調(diào)用。
全局后置鉤子
通過router.afterEach注冊耕赘，這些鉤子不會(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) => {
// ...
}
}
]
})
組件內(nèi)守衛(wèi)
- beforeRouteEnter（ 是支持給 next 傳遞回調(diào)的唯一守衛(wèi)）
- beforeRouteUpdate
- beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
// 不！能操骡！獲取組件實(shí)例 `this`九火，但可以通過傳一個(gè)回調(diào)給 next來訪問組件實(shí)例。next((vm)=>{...})
// 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前册招，組件實(shí)例還沒被創(chuàng)建
},
beforeRouteUpdate(to, from, next) {
// 在當(dāng)前路由改變岔激，但是該組件被復(fù)用時(shí)調(diào)用
// 舉例來說，對于一個(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)用炫彩。
// 可以訪問組件實(shí)例 `this`
},
beforeRouteLeave(to, from, next) {
// 導(dǎo)航離開該組件的對應(yīng)路由時(shí)調(diào)用
// 可以訪問組件實(shí)例 `this`
}
}
完整的導(dǎo)航解析流程
- 導(dǎo)航被觸發(fā)。
- 在失活的組件里調(diào)用 beforeRouteLeave 守衛(wèi)絮短。
- 調(diào)用全局的 beforeEach 守衛(wèi)江兢。
- 在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) 。
- 在路由配置里調(diào)用 beforeEnter丁频。
- 解析異步路由組件杉允。
- 在被激活的組件里調(diào)用 beforeRouteEnter邑贴。
- 調(diào)用全局的 beforeResolve 守衛(wèi) 。
- 導(dǎo)航被確認(rèn)叔磷。
- 調(diào)用全局的 afterEach 鉤子拢驾。
- 觸發(fā) DOM 更新。
- 調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)世澜，創(chuàng)建好的組件實(shí)例會(huì)作為回調(diào)函數(shù)的參數(shù)傳入独旷。
定義路由的時(shí)候可以配置meta字段，可以通過遍歷 $route.matched 來檢查路由記錄中的 meta 字段寥裂。
