怎么提高修改vue源碼實現(xiàn)動態(tài)路由緩存？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
創(chuàng)新互聯(lián)是一家專業(yè)提供博湖企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為博湖眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。
可以通過 this.$route.params.taskId來獲取當(dāng)前路由的 taskId。
重慶分公司
重慶分公司
{
path: 'CheckInputInfo/:taskId',
meta: {
title: '盤點錄入單'
},
name: 'CheckInputInfo',
component: () => import('@/view/Check/CheckInputInfo.vue')
}類似的，同樣也可使用 query方式，這時只需要在 path后面配置 :taskId即可實現(xiàn) CheckInputInfo?taskId=1和 CheckInputInfo?taskId=2這樣的路由,同時可以通過 this.＄route.query.taskId來獲取當(dāng)前路由的 taskId。
{
path: 'CheckInputInfo:taskId',
meta: {
title: '盤點錄入單'
},
name: 'CheckInputInfo',
component: () => import('@/view/Check/CheckInputInfo.vue')
}vue-router 通過配置 params和 query來實現(xiàn)動態(tài)路由，并可通過 this.＄route.xx來獲取當(dāng)前的 params或 query，省去了直接操作或處理 window.location，還是挺方便的。
注意 ：當(dāng)使用路由參數(shù)時，例如從 /user/foo 導(dǎo)航到 /user/bar，原來的組件實例會被復(fù)用。因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調(diào)用。
解讀：在不使用 keep-alive的情況下，我們每次加載路由，這時會重新 render當(dāng)前路由掛載的 component，但若這兩個路由是同一個路由組件配置的動態(tài)路由， vue為了性能設(shè)計了不會重新 render。
這顯然不符合我們的預(yù)期，那么該如何在動態(tài)路由下?lián)碛型暾纳芷谀兀看鸢甘?keep-alive。
keep-alive
官網(wǎng)解讀 ：keep-alive 包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。和 transition 相似，keep-alive 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現(xiàn)在組件的父組件鏈中。在 2.2.0 及其更高版本中，activated 和 deactivated 將會在 樹內(nèi)的所有嵌套組件中觸發(fā)。當(dāng)組件在 內(nèi)被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數(shù)將會被對應(yīng)執(zhí)行。
keep-alive通過緩存Vnode的方式解決了SPA最為關(guān)鍵的性能問題。以下，我就按步驟來分析以下：
一、路由觸發(fā)路由組件重新render的問題
1、不緩存模式：
每次切換都會重新 render，執(zhí)行整個生命周期，每次切換時，重新 render，重新請求，，必然不滿足需求。
2、緩存模式：
只是在進(jìn)入當(dāng)前路由的第一次 render，來回切換不會重新執(zhí)行生命周期，且能緩存 router-view的數(shù)據(jù)。
二、router-view 數(shù)據(jù)緩存問題
keep-alive 采用 render函數(shù)來創(chuàng)建 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
于是當(dāng)時用 keep-alive時，我們就可以保存每個 route-view的數(shù)據(jù)。
動態(tài)路由緩存問題及如何實現(xiàn)
一、bug表象
最開始其實是不知道這個 bug的，也是通過現(xiàn)象反推，然后由源碼解決這個問題的，那就先從現(xiàn)象說起：
動態(tài)路由緩存的的具體表現(xiàn)在：
由動態(tài)路由配置的路由只能緩存一份數(shù)據(jù)。 keep-alive動態(tài)路由只有第一個會有完整的生命周期，之后的路由只會觸發(fā) actived和 deactivated這兩個鉤子。 一旦更改動態(tài)路由的某個路由數(shù)據(jù)，期所有同路由下的動態(tài)路由數(shù)據(jù)都會同步更新。
我們的期望其實是在使用 keep-alive的情況下，動態(tài)路由能有非動態(tài)的表現(xiàn)，即擁有 完整的生命周期、 各自的數(shù)據(jù)緩存。
二、發(fā)掘問題關(guān)鍵
入手 keep-alive源碼發(fā)現(xiàn)，其實問題就出現(xiàn)在這一步：
if (
// not included
(include && (!name || !matches(include, name))) ||
// excluded
(exclude && name && matches(exclude, name))
) {
return vnode
}通過上面的表象其實可以探究出， router-view其實是已經(jīng)緩存了，而且一個動態(tài)路由的 router-view都是通過了 if判斷返回了 Vnode。那么再看一下這個 name是什么：
function getComponentName (opts: ?VNodeComponentOptions): ?string {
return opts && (opts.Ctor.options.name || opts.tag)
}
const name: ?string = getComponentName(componentOptions)這里的 opts其實對應(yīng)的就是 VueComponent的 ＄options，而 this.＄options.name不就是對應(yīng)著得 .vue文件里聲明的 name屬性。然后又想到，怪不得配置路由的時候要求提供的 name屬性要和組件內(nèi)部的 name值保持一致。
看到這里，問題已經(jīng)水落石出了，因為動態(tài)路由配置的組件相同， getComponentName每次返回相同 name，然后 render()去緩存了相同的 Vnode，且只能緩存了一份。既然如此，只要能正確的緩存 Vnode和取出 Vnode，動態(tài)路由情況下， keep-alive依然能正常運(yùn)行。
修改Vue源碼
上面說到了是因為動態(tài)路由組件名的問題，如果將緩存的 key設(shè)置為唯一不就行了嗎？
于是在 router-view上配置key，key取得師path，永遠(yuǎn)唯一：
