vue-element-admin——<keep-alive>不符合預(yù)期緩存的原因

本文章，以現(xiàn)在中后臺(tái)開(kāi)發(fā)用的非常多的開(kāi)源項(xiàng)目vue-element-admin為案例。首先，列出官方文檔與緩存<keep-alive>相關(guān)的鏈接（請(qǐng)認(rèn)真閱讀，出現(xiàn)緩存<keep-alive>不符合預(yù)期，大部分原因就是未認(rèn)真閱讀官方文檔或者對(duì)<keep-alive>不熟悉）。然后，本文章將總結(jié)出“不符合預(yù)期緩存的可能原因”，即“<keep-alive>不生效，不進(jìn)行緩存的原因”。

1. vue-element-admin提及路由和keep-alive相關(guān)的地方

• 1.1 路由和側(cè)邊欄 | vue-element-admin (panjiachen.github.io)

  ? 個(gè)人覺(jué)得，官方文檔這里的“配置項(xiàng)”下的"name"屬性，其注釋?xiě)?yīng)該更詳細(xì)一些（官方文檔這里也描述了，但官網(wǎng)放在了其他目錄下了，個(gè)人覺(jué)得這里應(yīng)該提示一下），如下：

  /*** 應(yīng)該和路由對(duì)應(yīng)的 view component 屬性的組件 "name" 屬性保持一致，* 這樣， <keep-alive> 的 include 屬性就可匹配組件自身的 name 選項(xiàng)*/
  name: 'router-name' // 設(shè)定路由的名字，一定要填寫(xiě)不然使用<keep-alive>時(shí)會(huì)出現(xiàn)各種問(wèn)題
  

  ? 重點(diǎn)閱讀一下，“多級(jí)目錄（嵌套路由）”，官網(wǎng)提到在“不要忘記還要手動(dòng)在二級(jí)目錄的根文件下添加一個(gè) <router-view>”

• 1.2 快捷導(dǎo)航(標(biāo)簽欄導(dǎo)航) | vue-element-admin (panjiachen.github.io)

  ? 重點(diǎn)閱讀一下，“注意事項(xiàng)”和 “緩存不適合場(chǎng)景”

• 1.3 新增頁(yè)面——多級(jí)目錄（嵌套路由） | vue-element-admin (panjiachen.github.io)

  ? 閱讀一下多級(jí)目錄（嵌套路由）

2.導(dǎo)致<keep-alive>不符合預(yù)期的可能原因

① 路由配置上，“name”屬性配置不對(duì)

比如，在router.js配置的一個(gè)路由的name為“dashboard”，而組件的name屬性為“Dashboard”。如下圖，未緩存。

應(yīng)該改為一致：在router.js配置改為和組件的name屬性一致，改為“Dashboard”。如下圖，緩存成功。

對(duì)應(yīng)該文章的前面的1.1、1.2。

② 組件自身的 name 選項(xiàng)未寫(xiě)

由于組件自身的 name 選項(xiàng)未寫(xiě)，**include**匹配不到組件自身的 name 選項(xiàng)，同樣未緩存成功。

對(duì)應(yīng)該文章的前面的1.1、1.2。

③ 多級(jí)目錄(嵌套路由)導(dǎo)致

如果按照文章的前面的1.3 新增頁(yè)面——多級(jí)目錄（嵌套路由） | vue-element-admin (panjiachen.github.io)，這種官方文檔的三級(jí)目錄（或以上）的路由寫(xiě)法。

然后，在已在對(duì)應(yīng)組件上，加上和router配置一樣的name屬性，即解決本文章的2.①和2.②

<keep-alive>是不能緩存的Menu1-1 、Menu1-3、Menu1-2-1和Menu1-2-2的，而Menu2(二級(jí)目錄)緩存了。

可以看看，vue2官網(wǎng)對(duì)keep-alive的介紹。

3.總結(jié)

vue-element-admin——緩存不符合預(yù)期的原因：
① 路由配置上，“name” 屬性配置不對(duì)，和組件的 name 不一致
② 路由對(duì)應(yīng)的組件自身的 name 選項(xiàng)未寫(xiě)
③ 多級(jí)目錄(嵌套路由)導(dǎo)致，三級(jí)和三級(jí)以上不能緩存

建議多看看官方文檔，避免“不規(guī)范使用<keep-alive>，導(dǎo)致<keep-alive>不符合預(yù)期”

歡迎閱讀一下，個(gè)人寫(xiě)的一篇文章——“vue-element-admin的三級(jí)目錄（或以上）<keep-alive>不緩存的解決方法”。