Vue-router進階篇

前言

上一篇咱們學習了vue-router的基礎，包括基礎標籤和基礎配置，這一篇文章，咱們將會來學習路由的幾個高級特性。讓咱們開始吧。

---

路由守衛

路由守衛是由多個檢測函數和鉤子函數組成的一連串的自定義邏輯。

全局守衛設置：

1. beforeEach (to, from, next) : router.js之中設置的全局攔截守衛，從名字能夠看出，每一次路由的變化實際上都會通過一次這個函數內容，to表示的是變化後的路由對象，from表示的是來自於哪個路由對象內容，next是一個函數內容，能夠傳遞相關的跳轉值，或者直接調用，會跳轉到指定的目標路徑下面。因此咱們在是用的時候必定要記得next的調用。

咱們來看一段代碼：

import Vue from 'vue'
import Router from 'vue-router'
import router from './router'

Vue.use(Router)

const route = new Router({
  ...router
})

const logging = false;

route.beforeEach((to, from, next) => {
  if( to.name !== "logging" ){
    if( !logging ) next( { name: 'logging' } )
    else next();
  }
  else {
    if( logging ) next( { name: 'home' } )
    else next();
  }
})

export default route

複製代碼

這是一段設置登錄過濾的代碼，只是簡單的模擬一下。當沒有登錄的時候將會跳轉到名稱爲logging的界面，當登錄了以後若是是須要跳轉登錄界面則轉換當前跳轉路徑到home頁面，不然則直接跳轉。

2. afterEach(to, from)：這個方法是在跳轉完成以後執行的鉤子函數內容，而且全部的路由跳轉所有都會調用這一鉤子，可是因爲是跳轉完成以後才觸發，因此並不影響跳轉結果，所以只有兩個參數。

代碼伺候：

route.afterEach((to, from) => {
  console.log(to);
  console.log(from);
  console.log(arguments);
  console.log("afterEach");
})
複製代碼

3. beforeResolve(to, from, next) :全局解析守衛，在全部的組建內守衛和異步守衛執行完畢以後纔會執行，可是會在展現頁面渲染完成以前執行，因此是能夠修改跳轉方向的（注意有next函數內容），書寫方式相似於beforeEach，這裏就再也不書寫了，能夠本身嘗試一下。

路由守衛設置：

4. beforeEnter(to, from, next)：路由獨享守衛，書寫在routes屬性的數據項對象之中，當跳轉到當前路徑的時候，會自動的調用這一守衛函數。和beforeEach的區別只是在於，一個是全局的，一個是單個對象的，固然執行順序也是會有差異，以後會同一說明。

代碼伺候:

routes: [
    {
        path: '/',
        name: 'home',
        component: Home,
        beforeEnter: (to, from, next) => {
            console.log('this is beforeEnter');
            next();
        }
    }
]
複製代碼

組件守衛設置：

5. beforeRouteEnter(to, from, next):組建內路由守衛函數，編寫在組建之中,是專門對於組件邏輯的一道關卡。這一守衛在路由尚未渲染提交前就已經執行，因此咱們在這一守衛之中是沒有辦法調用this變量的，由於這個時候還不存在this變量內容。可是若是實在是須要使用當前的vue實例對象，能夠向next方法之中傳遞一個方法內容。在後面的守衛執行順序之中咱們能夠發現，實際上beforeRouteUpdate會在beforeRouteEnter以後才運行，那麼爲何服用組件的enter守衛this也不可用呢。我的覺的是爲了於激活新組件保持隊形。

咱們來看一段代碼：

beforeRouteEnter(to, from, next){
    console.log('this is before route enter');
    next(vm => {
        console.log(vm); //vm就是當前組件的實例
    });
},
複製代碼

6. beforeRouteUpdate(to, from, next):這一守衛是當路由發生變化，組件被複用的時候調用的。因此咱們能夠知道，首次進入組建的時候是不會調用這一守衛的，只有當複用發生的時候纔會調用。同時這一函數之中能夠調用this，由於當前組件對象已經被渲染了。

7. beforeRouteLeave(to, from, next):這一守衛會在當前組件即將離開的時候進行調用，咱們經常在頁面離開的時候得到一些是否要離開當前界面的確認框，就能夠經過這一守衛進行實現。同時這一守衛之中也是能夠調用this的。

咱們綜合上面三個守衛來一段代碼:

beforeRouteEnter(to, from, next){
    console.log('this is before route enter');
    next(vm => {
        console.log(vm);
    });
},

beforeRouteUpdate(to, from, next){
    console.log('this is before route update');
    next();
},

beforeRouteLeave(to, from, next){
    var confirm = confirm("是否離開當前頁面?");
    if(confirm){
        console.log('this is before route Leave');
        next();
    }
    else {
        next(false);
    }
}
複製代碼

最後咱們來總結一下守衛的調用過程吧。

1. 路由改變觸發。
2. 肯定離開當前組件時，調用beforeRouteLeave守衛，而後組件失活。
3. 若有設置，調用全局的beforeEach守衛。
4. 如此處跳轉的組件爲重用組件則調用重用組件之中的beforeRouteUpdate守衛。
5. 針對跳轉的路由，調用路由獨享的守衛beforeEnter。
6. 解析異步路由組件。 （import引入當前展現組件。）
7. 在被激活的組件之中調用beforeRouteEnter。（複用組建從新激活，新組件需讀取解析）
8. 調用全局的解析守衛 beforeResolve。
9. 導航被確認。
10. 調用全局的鉤子函數afterEach。
11. 觸發dom更新。
12. 用建立好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

---

路由動態效果

經過使用< transition >標籤來進行動效，基礎篇咱們有說過router-view這個功能標籤是可使用動效標籤包裹，而且可使用keep-alive標籤的，這裏咱們來嘗試一個簡單的動效吧。 上代碼：

html代碼:
<transition-group name="change">
    <router-view key="default"/>
    <router-view key="child2" name="child2"/>
</transition-group>

style代碼：
.change-enter{
    opacity: 0
  }

  .change-enter-active{
    transition: opacity 1s ease;
  }

  .change-enter-to{
    opacity: 1;
  }

  .change-leave{
    opacity: 1
  }

  .change-leave-active{
    transition: opacity 1s ease;
  }

  .change-leave-to{
    opacity: 0;
  }
複製代碼

這樣咱們就簡單實現了一個隱出隱現的效果。

---

總結

本文主要是說明了路由守衛的功能和使用，同時捎帶說起了過分動畫內容。路由的所有概念和用法能夠說就此所有說起完畢。以後關於vue-router的內容只剩下源碼閱讀，和一些開發時候的問題總結，我會努力持續更新，但願看官們能滿意。有什麼錯誤的地方也請幫忙告知，我也會即便修改過來的。歡迎你們一塊兒學習討論