Vue-Router模式、鉤子

上一篇主要寫了一下vuer-router的基本使用，能夠說解決溫飽了，下面就再來點下午茶吧

模式

vue-router中的模式選項主要在router實例化的時候進行定義的，以下

const router = new VueRouter({
　　　mode: 'history', // 兩種類型history 還有 hash
     routes: routes // 能夠縮寫成routes
})

 有兩種模式可供選擇，history 和 hash，大體對比一下， 

模式	優勢	缺點
hash	使用簡單、無需後臺支持	在url中以hash形式存在，不會傳到後臺
history	地址明確，便於理解和後臺處理	須要後臺配合

hash模式對於後臺來說就是一個url，由於地址中的hash值是不會傳到後臺的，因此服務器端作一個根地址的映射就能夠了。
history模式最終的路由都體如今url的pathname中，這部分是會傳到服務器端的，所以須要服務端對每個可能的path值都做相應的映射。或者採用模糊匹配的方式進行映射。
除此以外，history模式下，若是後端不是一對一的進行映射，而是模糊匹配的話，那麼就要注意一下404的狀況了。這個時候就須要在前端router中定義404頁面了。

404路由的定義

因爲router自己的匹配是從上到下的，若是在前面找到了匹配的路由，就跳轉了。所以能夠直接在最後添加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-頁面丟了'
    }
}]

在前面匹配不到的時候，* 表明所有，就是都指向404頁面

路由鉤子

路由鉤子主要是給使用者在路由發生變化時進行一些特殊的處理而定義的，靠。。好拗口啊。
整體來說vue裏面提供了三大類鉤子
一、全局鉤子
二、某個路由獨享的鉤子
三、組件內鉤子

全局鉤子

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

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 => {

})

 

某個路由獨享鉤子

就像說的同樣，給某個路由單獨使用的，本質上和後面的組件內鉤子是同樣的。都是特指的某個路由。不一樣的是，這裏的通常定義在router當中，而不是在組件內。以下

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

 

組件內鉤子

首先看一下官方定義：

你能夠在路由組件內直接定義如下路由導航鉤子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

路由組件!路由組件!路由組件!重要的事情說三遍，你們必定要注意這裏說的是「路由組件」，而路由組件！== 組件，路由組件！== 組件，路由組件！== 組件！以前一直沒注意這點，而後在子組件裏面傻乎乎的調鉤子函數發現一直沒用。。。
咱們先來看一下什麼是路由組件？

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

也就是說router中定義的入口vue文件以外的組件，是沒有鉤子函數的，也就不用說使用了。可是若是你使用了並不會報錯，只是沒反應。（本想畫個圖的，太懶了。。。本身理解理解吧，很好理解的）
這裏再回頭看下這個路由內鉤子是怎麼用的，很簡單和data、method平級的方法

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

 

三種路由鉤子中都涉及到了三個參數，這裏直接上官方介紹吧

to: Route: 即將要進入的目標 路由對象
from: Route: 當前導航正要離開的路由
next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
next(false): 中斷當前的導航。若是瀏覽器的 URL 改變了（多是用戶手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。
next(‘/’) 或者 next({ path: ‘/’ }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。

模式和鉤子基本就到這了，有須要的能夠在仔細研究一個官當的文檔。以上僅是我的學習使用過程的一些理解，若是錯誤，歡迎指出~~