Vue-Router簡(jiǎn)介
Vue-Router是Vue.js官方維護(hù)的路由插件，同時(shí)也是官方推薦的路由插件。它與Vue.js內(nèi)核深度結(jié)合，讓開發(fā)單頁(yè)應(yīng)用更加容易簡(jiǎn)便。
基本配置
- **HTML **
當(dāng) <router-link> 對(duì)應(yīng)的路由匹配成功，將自動(dòng)設(shè)置 class 屬性值 .router-link-active
<div id="app">
<h1>Hello App!</h1>
<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>
</div>
- JavaScript
Vue.use(VueRouter)
//定義路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
//創(chuàng)建router實(shí)例
const router = new VueRouter({
routes // （縮寫）相當(dāng)于 routes: routes
})
//掛載實(shí)例
const app = new Vue({
router
}).$mount('#app')
動(dòng)態(tài)路由配置
-
場(chǎng)景：通過(guò)URL傳遞參數(shù)
const router = new VueRouter({ routes: [ // 動(dòng)態(tài)路徑參數(shù) 以冒號(hào)開頭 { path: '/user/:id', component: User } ] })動(dòng)態(tài)路徑參數(shù)使用冒號(hào)
:標(biāo)記，對(duì)應(yīng)的值都會(huì)設(shè)置到$route.params中。此處可通過(guò)this.$route.params.id來(lái)獲取id，在模板中可以省略this.，如const User = { template: '<div>User {{ $route.params.id }}</div>' } 如果是非必須的參數(shù)，可在參數(shù)后加一個(gè)
?，如path:''/page1/:id?'對(duì)于帶查詢參數(shù)的URL，如/page1?id=123可用$route.query訪問(wèn)，如果沒(méi)有查詢參數(shù)，則是個(gè)空對(duì)象。
響應(yīng)路由參數(shù)的變化
當(dāng)使用路由參數(shù)時(shí)，例如從 /page1/123 導(dǎo)航到 /page1/321，原來(lái)的組件實(shí)例會(huì)被復(fù)用。因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過(guò)，這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用。
復(fù)用組件時(shí)，想對(duì)路由參數(shù)的變化作出響應(yīng)的話，你可以簡(jiǎn)單地watch（監(jiān)測(cè)變化） $route 對(duì)象。
watch: {
'$route' (to, from) {
// 對(duì)路由變化作出響應(yīng)...
}
}
或者使用 2.2 中引入的 beforeRouteUpdate 守衛(wèi)：
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
嵌套路由
實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動(dòng)態(tài)路徑也按某種結(jié)構(gòu)對(duì)應(yīng)嵌套的各層組件。借助 vue-router，使用嵌套路由配置，就可以很簡(jiǎn)單地表達(dá)這種關(guān)系。
使用 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
}
]
}
]
})
編程式導(dǎo)航
除了使用 <router-link> 創(chuàng)建a 標(biāo)簽來(lái)定義導(dǎo)航鏈接，我們還可以借助router 的實(shí)例方法，通過(guò)編寫代碼來(lái)實(shí)現(xiàn)。
// 字符串
router.push('home')
// 對(duì)象
router.push({ path: 'home' })
// 命名的路由-> /user/123
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
注意：如果提供了 path，params 會(huì)被忽略
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
命名路由
有時(shí)候，通過(guò)一個(gè)名稱來(lái)標(biāo)識(shí)一個(gè)路由顯得更方便一些，特別是在鏈接一個(gè)路由，或者是執(zhí)行一些跳轉(zhuǎn)的時(shí)候。命名路由可以通過(guò)$route.name來(lái)獲取名稱。
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
路由元信息
定義路由的時(shí)候可以配置meta 字段?？赏ㄟ^(guò)$route.meta訪問(wèn)。
{
path: '/user/:userId',
name: 'user',
component: User,
meta: {
title: 'user'
}
}
全局鉤子和路由獨(dú)享的鉤子
正如其名，vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種機(jī)會(huì)植入路由導(dǎo)航過(guò)程中：全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的。
記住參數(shù)或查詢的改變并不會(huì)觸發(fā)進(jìn)入/離開的導(dǎo)航守衛(wèi)。你可以通過(guò)觀察 $route 對(duì)象來(lái)應(yīng)對(duì)這些變化，或使用 beforeRouteUpdate 的組件內(nèi)守衛(wèi)。
-
全局守衛(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)航正要離開的路由
-
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(error): (2.4.0+) 如果傳入
next的參數(shù)是一個(gè)Error實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給router.onError()注冊(cè)過(guò)的回調(diào)。
確保要調(diào)用 next 方法，否則鉤子就不會(huì)被 resolved。
-
全局解析守衛(wèi)
在 2.5.0+ 你可以用
router.beforeResolve注冊(cè)一個(gè)全局守衛(wèi)。這和router.beforeEach類似，區(qū)別是在導(dǎo)航被確認(rèn)之前，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用。 -
全局后置鉤子
你也可以注冊(cè)全局后置鉤子，然而和守衛(wèi)不同的是，這些鉤子不會(huì)接受
next函數(shù)也不會(huì)改變導(dǎo)航本身：router.afterEach((to, from) => { // ... }) -
路由獨(dú)享的守衛(wèi)
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] }) -
組件內(nèi)的守衛(wèi)
最后，你可以在路由組件內(nèi)直接定義以下路由導(dǎo)航守衛(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)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用 // 可以訪問(wèn)組件實(shí)例 `this` } }?
