動態路由

官網解讀 ：我們經常需要把某種模式匹配到的所有路由，全都對映到同個元件。例如，我們有一個 User 元件，對於所有 ID 各不相同的使用者，都要使用這個元件來渲染。那麼，我們可以在 vue-router 的路由路徑中使用“動態路徑引數”(dynamic segment) 來達到這個效果。

即如果你有一個 盤點錄入單 路由，但你想通過不同的傳不同的 ID 來載入 CheckInputInfo 這個元件，若採用 params 方式，這時只需要在 path 後面配置 /:taskId 即可實現 CheckInputInfo/1 和 CheckInputInfo/2 這樣的路由，同時可以通過 this.$route.params.taskId

{
  path: 'CheckInputInfo/:taskId',meta: {
   title: '盤點錄入單'
  },name: 'CheckInputInfo',component: () => import('@/view/Check/CheckInputInfo.vue')
 }

類似的，同樣也可使用 query 方式，這時只需要在 path 後面配置 :taskId 即可實現 CheckInputInfo?taskId=1 和 CheckInputInfo?taskId=2 這樣的路由,同時可以通過 this.＄route.query.taskId

{
  path: 'CheckInputInfo:taskId',component: () => import('@/view/Check/CheckInputInfo.vue')
 }

vue-router 通過配置 params 和 query 來實現動態路由，並可通過 this.＄route.xx 來獲取當前的 params 或 query ，省去了直接操作或處理 window.location ，還是挺方便的。

注意 ：當使用路由引數時，例如從 /user/foo 導航到 /user/bar，原來的元件例項會被複用。因為兩個路由都渲染同個元件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味著元件的生命週期鉤子不會再被呼叫。

解讀：在不使用 keep-alive 的情況下，我們每次載入路由，這時會重新 render 當前路由掛載的 component ，但若這兩個路由是同一個路由元件配置的動態路由， vue 為了效能設計了不會重新 render 。

這顯然不符合我們的預期，那麼該如何在動態路由下擁有完整的生命週期呢？答案是 keep-alive 。

keep-alive

官網解讀 ：keep-alive 包裹動態元件時，會快取不活動的元件例項，而不是銷燬它們。和 transition 相似，keep-alive 是一個抽象元件：它自身不會渲染一個 DOM 元素，也不會出現在元件的父元件鏈中。在 2.2.0 及其更高版本中，activated 和 deactivated 將會在 樹內的所有巢狀元件中觸發。當元件在 內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函式將會被對應執行。

keep-alive通過快取Vnode的方式解決了SPA最為關鍵的效能問題。以下，我就按步驟來分析以下：

一、路由觸發路由元件重新render的問題

1、不快取模式：

<router-view></router-view>

每次切換都會重新 render ，執行整個生命週期，每次切換時，重新 render ，重新請求，，必然不滿足需求。

2、快取模式：

<keep-alive>
 <router-view></router-view>
</keep-alive>

只是在進入當前路由的第一次 render ，來回切換不會重新執行生命週期，且能快取 router-view 的資料。

二、router-view 資料快取問題

keep-alive 採用 render 函式來建立 Vnode ，一下是 vue v2.5.10 的 keep-alive.js 的 render() ：

render () {
  const slot = this.$slots.default
  const vnode: VNode = getFirstComponentChild(slot)
  const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
  if (componentOptions) {
   // check pattern
   const name: ?string = getComponentName(componentOptions)
   const { include,exclude } = this
   if (
    // not included
    (include && (!name || !matches(include,name))) ||
    // excluded
    (exclude && name && matches(exclude,name))
   ) {
    return vnode
   }

   const { cache,keys } = this
   const key: ?string = vnode.key == null
    // same constructor may get registered as different local components
    // so cid alone is not enough (#3269)
    ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
    : vnode.key
   if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    // make current key freshest
    remove(keys,key)
    keys.push(key)
   } else {
    cache[key] = vnode
    keys.push(key)
    // prune oldest entry
    if (this.max && keys.length > parseInt(this.max)) {
     pruneCacheEntry(cache,keys[0],keys,this._vnode)
    }
   }

   vnode.data.keepAlive = true
  }
  return vnode || (slot && slot[0])
 }
}

在 render 是獲取到 Vnode ，若 cache[key] 存在，則:

vnode.componentInstance = cache[key].componentInstance

否則，將 Vnode 儲存在 cache 裡：

cache[key] = vnode

於是當時用 keep-alive 時，我們就可以儲存每個 route-view 的資料。

動態路由快取問題及如何實現

一、bug表象

最開始其實是不知道這個 bug 的，也是通過現象反推，然後由原始碼解決這個問題的，那就先從現象說起：

動態路由快取的的具體表現在：

由動態路由配置的路由只能快取一份資料。 keep-alive 動態路由只有第一個會有完整的生命週期，之後的路由只會觸發 actived 和 deactivated 這兩個鉤子。 一旦更改動態路由的某個路由資料，期所有同路由下的動態路由資料都會同步更新。

我們的期望其實是在使用 keep-alive 的情況下，動態路由能有非動態的表現，即擁有 完整的生命週期 、 各自的資料快取 。

二、發掘問題關鍵

入手 keep-alive 原始碼發現，其實問題就出現在這一步：

if (
 // not included
 (include && (!name || !matches(include,name))) ||
 // excluded
 (exclude && name && matches(exclude,name))
) {
 return vnode
}

通過上面的表象其實可以探究出， router-view 其實是已經快取了，而且一個動態路由的 router-view 都是通過了 if 判斷返回了 Vnode 。那麼再看一下這個 name 是什麼：

function getComponentName (opts: ?VNodeComponentOptions): ?string {
 return opts && (opts.Ctor.options.name || opts.tag)
}
const name: ?string = getComponentName(componentOptions)

這裡的 opts 其實對應的就是 VueComponent 的 ＄options ，而 this.＄options.name 不就是對應著得 .vue 檔案裡宣告的 name 屬性。然後又想到，怪不得配置路由的時候要求提供的 name 屬性要和元件內部的 name 值保持一致。

看到這裡，問題已經水落石出了，因為動態路由配置的元件相同， getComponentName 每次返回相同 name ，然後 render() 去快取了相同的 Vnode ，且只能快取了一份。既然如此，只要能正確的快取 Vnode 和取出 Vnode ，動態路由情況下， keep-alive 依然能正常執行。

修改Vue原始碼

上面說到了是因為動態路由元件名的問題，如果將快取的 key 設定為唯一不就行了嗎？

於是在 router-view 上配置key，key取得師path，永遠唯一：

<keep-alive :include="cacheList">
 <router-view :key="$route.path"></router-view>
</keep-alive>

然後修改 keep-alive.js 原始碼，如下（因為放假的關係不詳細說了，直接貼原始碼，實現的人就是我，也是第一個，github上此BUG目前還是open狀態）:

/* 
*@flow
*modify by LK 20190624
*/

import { isRegExp,remove } from 'shared/util'
import { getFirstComponentChild } from 'core/vdom/helpers/index'

type VNodeCache = { [key: string]: ?VNode };

function getComponentName (opts: ?VNodeComponentOptions): ?string {
 return opts && (opts.Ctor.options.name || opts.tag)
}

function matches (pattern: string | RegExp | Array<string>,key: string | Number): boolean {
 if (Array.isArray(pattern)) {
  return pattern.indexOf(key) > -1
 } else if (typeof pattern === 'string') {
  return pattern.split(',').indexOf(key) > -1
 } else if (isRegExp(pattern)) {
  return pattern.test(key)
 }
 /* istanbul ignore next */
 return false
}

function pruneCache (keepAliveInstance: any,filter: Function) {
 const { cache,_vnode } = keepAliveInstance
 for (const key in cache) {
  const cachedNode: ?VNode = cache[key]
  if (cachedNode) {
   // const name: ?string = getComponentName(cachedNode.componentOptions)
   if (key && !filter(key)) {
    pruneCacheEntry(cache,key,_vnode)
   }
  }
 }
}

function pruneCacheEntry (
 cache: VNodeCache,key: string,keys: Array<string>,current?: VNode
) {
 const cached = cache[key]
 if (cached && (!current || cached.tag !== current.tag)) {
  cached.componentInstance.$destroy()
 }
 cache[key] = null
 remove(keys,key)
}

const patternTypes: Array<Function> = [String,RegExp,Array]

export default {
 name: 'keep-alive',abstract: true,props: {
  include: patternTypes,exclude: patternTypes,max: [String,Number]
 },created () {
  this.cache = Object.create(null)
  this.keys = []
 },destroyed () {
  for (const key in this.cache) {
   pruneCacheEntry(this.cache,this.keys)
  }
 },mounted () {
  this.$watch('include',val => {
   pruneCache(this,key => matches(val,key))
  })
  this.$watch('exclude',key => !matches(val,key))
  })
 },render () {
  const slot = this.$slots.default
  const vnode: VNode = getFirstComponentChild(slot)
  const key: ?string = vnode.key == null
    // same constructor may get registered as different local components
    // so cid alone is not enough (#3269)
    ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
    : vnode.key
  const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
  if (componentOptions) {
   // check pattern
   const name: ?string = getComponentName(componentOptions)
   const { include,exclude } = this
   if (
    // not included
    (include && (!key || !matches(include,key))) ||
    // excluded
    (exclude && key && matches(exclude,key))
   ) {
    return vnode
   }

   const { cache,keys } = this

   if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    // make current key freshest
    remove(keys,this._vnode)
    }
   }

   vnode.data.keepAlive = true
  }
  return vnode || (slot && slot[0])
 }
}

如何整合

因為放假趕車的關係，粗略說一下，有問題直接在底下評論：

一、修改package.json：

npm install時不下載 vue ，修改 packjson.js 改為本地的 vue："vue": "file:./vue2.5.0/"

"dependencies": {
 "axios": "^0.18.0","clipboard": "^2.0.0","codemirror": "^5.38.0","countup": "^1.8.2","cropperjs": "^1.2.2","dayjs": "^1.7.7","echarts": "^4.0.4","html2canvas": "^1.0.0-alpha.12","iview": "^3.2.2","iview-area": "^1.5.17","js-cookie": "^2.2.0","simplemde": "^1.11.2","sortablejs": "^1.7.0","tree-table-vue": "^1.1.0","v-org-tree": "^1.0.6","vue": "file:./vue2.5.0/","vue-i18n": "^7.8.0","vue-router": "^3.0.1","vuedraggable": "^2.16.0","vuex": "^3.0.1","wangeditor": "^3.1.1","xlsx": "^0.13.3"
},

二、修改所有本地 import vue 為本地檔案：

// import Vue from 'vue'
import Vue from '../vue-2.5.10/src/core/index'

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。