上一篇主要寫(xiě)了一下vuer-router的基本使用，可以說(shuō)解決溫飽了，下面就再來(lái)點(diǎn)下午茶吧

模式

vue-router中的模式選項(xiàng)主要在router實(shí)例化的時(shí)候進(jìn)行定義的，如下

const router = new VueRouter({
　　　mode: 'history', // 兩種類(lèi)型history 還有 hash
   routes: routes // 可以縮寫(xiě)成routes
})

有兩種模式可供選擇，history 和 hash，大致對(duì)比一下，

hash模式對(duì)于后臺(tái)來(lái)講就是一個(gè)url，因?yàn)榈刂分械膆ash值是不會(huì)傳到后臺(tái)的，所以服務(wù)器端做一個(gè)根地址的映射就可以了。
history模式最終的路由都體現(xiàn)在url的pathname中，這部分是會(huì)傳到服務(wù)器端的，因此需要服務(wù)端對(duì)每一個(gè)可能的path值都作相應(yīng)的映射?；蛘卟捎媚：ヅ涞姆绞竭M(jìn)行映射。

除此之外，history模式下，如果后端不是一對(duì)一的進(jìn)行映射，而是模糊匹配的話(huà)，那么就要注意一下404的情況了。這個(gè)時(shí)候就需要在前端router中定義404頁(yè)面了。

404路由的定義

由于router本身的匹配是從上到下的，如果在前面找到了匹配的路由，就跳轉(zhuǎn)了。因此可以直接在最后添加404的路由，如下

let routerConfig = [{
  path: '/pages',
  component: App,
  children: [{
    path: 'demo/step1/list',
    component: coupon,
    name: 'coupon-list',
    meta: {
      title: '紅包'
    }
  }]
}, {
  path: '*',
  component: NotFound,
  name: 'notfound',
  meta: {
    title: '404-頁(yè)面丟了'
  }
}]

在前面匹配不到的時(shí)候，* 代表全部，就是都指向404頁(yè)面

路由鉤子

路由鉤子主要是給使用者在路由發(fā)生變化時(shí)進(jìn)行一些特殊的處理而定義的，靠。。好拗口啊。

總體來(lái)講vue里面提供了三大類(lèi)鉤子

1、全局鉤子
2、某個(gè)路由獨(dú)享的鉤子
3、組件內(nèi)鉤子

全局鉤子

顧名思義，全局鉤子全局用，使用如下

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: routerConfig
})

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'demo'
  if (!to.query.url && from.query.url) {
    to.query.url = from.query.url
  }
  next()
})

router.afterEach(route => {
})

某個(gè)路由獨(dú)享鉤子

就像說(shuō)的一樣，給某個(gè)路由單獨(dú)使用的，本質(zhì)上和后面的組件內(nèi)鉤子是一樣的。都是特指的某個(gè)路由。不同的是，這里的一般定義在router當(dāng)中，而不是在組件內(nèi)。如下

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   },
   beforeLeave: (to, from, next) => {
    // ...
   }
  }
 ]
})

組件內(nèi)鉤子

首先看一下官方定義：

你可以在路由組件內(nèi)直接定義以下路由導(dǎo)航鉤子

1. beforeRouteEnter
2. beforeRouteUpdate (2.2 新增)
3. beforeRouteLeave

路由組件!路由組件!路由組件!重要的事情說(shuō)三遍，大家一定要注意這里說(shuō)的是“路由組件”，而路由組件！== 組件，路由組件！== 組件，路由組件！== 組件！之前一直沒(méi)注意這點(diǎn)，然后在子組件里面傻乎乎的調(diào)鉤子函數(shù)發(fā)現(xiàn)一直沒(méi)用。。。

我們先來(lái)看一下什么是路由組件？

路由組件：直接定義在router中component處的組件

也就是說(shuō)router中定義的入口vue文件之外的組件，是沒(méi)有鉤子函數(shù)的，也就不用說(shuō)使用了。但是如果你使用了并不會(huì)報(bào)錯(cuò)，只是沒(méi)反應(yīng)。（本想畫(huà)個(gè)圖的，太懶了。。。自己理解理解吧，很好理解的）

這里再回頭看下這個(gè)路由內(nèi)鉤子是怎么用的，很簡(jiǎn)單和data、method平級(jí)的方法

beforeRouteLeave(to, from, next) {
  // ....
  next()
},
beforeRouteEnter(to, from, next) {
  // ....
  next()
},
beforeRouteUpdate(to, from, next) {
  // ....
  next()
},
computed: {},
method: {}

三種路由鉤子中都涉及到了三個(gè)參數(shù)，這里直接上官方介紹吧

1. to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象
2. from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由
3. next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴(lài) next 方法的調(diào)用參數(shù)。
4. next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）。
5. next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶(hù)手動(dòng)或者瀏覽器后退按鈕），那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。
6. next(‘/') 或者 next({ path: ‘/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。

模式和鉤子基本就到這了，有需要的可以在仔細(xì)研究一個(gè)官當(dāng)?shù)奈臋n。以上僅是個(gè)人學(xué)習(xí)使用過(guò)程的一些理解，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論