一、介紹
先來看一個問題？
從首頁的區塊鏈模塊切換到文章詳情頁面，再從文章詳情頁面回到首頁，我們發現首頁重新渲染原來的狀態沒有了，又回到了推薦模塊，
首先，這是正常的狀態，并非問題，路由在切換的時候會銷毀切出去的頁面組件，然后渲染匹配到的頁面組件，
但是我想要某些頁面保持狀態，而不會隨著路由切換導致重新渲染，
二、解決方案
使用 keep-alive 快取組件
官方檔案：在動態組件上使用 keep-alive
主要用于保留組件狀態或避免重新渲染，當它包裹動態組件時，會快取不活動的組件實體，而不是銷毀它們，
（1）組件快取不是持久化，它只是在應用運行期間不會重新渲染，如果頁面重繪還是會回到初始狀態，
（2） 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在組件的父組件鏈中，
（3） 要求被切換到的組件都有自己的名字，不論是通過組件的 name 選項還是區域/全域注冊，
（4）組件生命周期鉤子和快取
（5）include 和 exclude 屬性允許組件有條件地快取，二者都可以用逗號分隔字串、正則運算式或一個陣列來表示，
<!-- 逗號分隔字串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正則運算式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 陣列 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
匹配首先檢查組件自身的 name 選項，如果 name 選項不可用，則匹配它的區域注冊名稱 (父組件 components 選項的鍵值)，匿名組件不能被匹配，
三、專案中的快取配置
參考鏈接：
https://juejin.im/post/5d22f0f3f265da1b94216d0b
問題描述：
我們希望
-
登錄成功后，就把快取給清除掉，讓組件重新進行渲染，
-
等頁面渲染完成后，再給頁面加上快取（keep-alive）
實作思路：給keep-alive 的include屬性系結一個動態的陣列，因為keep-alive只會快取include陣列中的組件
首頁在Vuex容器中定義這個動態陣列cachePages：
然后，在用戶登錄成功之后，清除layout組件的快取：
這樣就解決了上面提到的，用戶1登錄后退出登錄，使用用戶2的賬號登錄時，”我的“頁面的個人資訊展示的還是用戶1的個人資訊的問題，
但是此時，layout組件沒有快取，當登錄的用戶從區塊鏈頻道點擊 某篇文章 -> 進入文章詳情頁面后，再回傳到首頁時，首頁會重新進行渲染，無法回到之前用戶所在的區塊鏈頻道，而是直接變成首頁渲染成功后默認顯示的推薦頻道，
為了解決這個問題：我們可以在layout組件的渲染完成之后，給它加上快取，
解決快取帶來的串列滾動位置問題：
就是串列滾動的位置沒有快取下來，也就是用戶在首頁的 區塊鏈模塊的文章串列滾動了一段距離后，進去文章詳情頁面，再回傳到首頁時，頁面確實還在區塊鏈模塊，但是串列滾動的位置又回到了串列頂部，
layout切換到文章詳情頁面，觸發activated生命鉤子:
文章詳情頁面切換到layout，觸發deactivated生命鉤子:
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/290153.html
標籤：區塊鏈
上一篇：功率、算力單位及全球哈希能耗
下一篇：程式員的核心競爭力是什么？