使用vue單頁開發項目時遇到一個問題：在列表頁點擊一條數據進入詳情頁，按返回鍵返回列表頁時頁面刷新了，用戶體驗非常差，使用<keep-alive>解決這個問題。
<keep-alive>是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM。
首先在App.vue頁面（或其你真正引入組件的地方，看實際項目情況而定）上有下面一段代碼，我們都知道這是頁面渲染的地方。
<router-view></router-view>
把這段代碼改成如下：
<keep-alive>
? ? <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
我們能看到這段代碼做的邏輯判斷，當路由的meta屬性的keepAlive屬性值為true時頁面的狀態保存，其他情況下不保存狀態。
然后就是給我們路由設置keepAlive屬性值，比如我是給主頁（列表頁）的路由設置了keepAlive屬性為true。
{
path: 'list,? //集散點選點仿真輸入
? name: 'List',
? component: List,
? meta: {
? ? requiresAuth: true,
? ? privilege: ['capacityStatus'],
? ? keepAlive: true,//此組件需要被緩存
? ? isBack:false, //用于判斷上一個頁面是哪個
? }
},
{
path: 'listDetail',? //集散點選點仿真輸入編輯（調整機構關系）
? name: 'ListDetail',
? component: ListDetail,
? meta: {
? requiresAuth: true,
? ? privilege: ['capacityStatus'],
? }
},
這樣設置了之后，List頁的狀態就會保存，返回鍵返回到List時頁面不會刷新請求數據了。
但是有問題啊！！！從List列表頁跳到任何頁面，再返回List列表頁都不會刷新頁面！這并不是我想要的，我只要從ListDetail詳情頁返回列表頁時不刷新頁面，其他情況下是需要刷新的。所以還需要加一些處理，思路就是從List列表頁跳轉到其他頁面時把主頁的keepAlive值設置為false，從ListDetail詳情頁返回List列表頁時把List列表頁的keepAlive值設置為true就好了，代碼如下：
List跳轉到其他頁面時把List的keepAlive值設置為false
在List列表頁加上如下代碼：
beforeRouteEnter(to, from, next) {
if(from.name=='ListDetail'){
to.meta.isBack=true;
? }
next();
},
activated() {
if(this.$route.meta.isBack){
// 如果isBack是false，表明需要獲取新數據，否則就不再請求，直接使用緩存的數據
? ? let formDataStorage=JSON.parse(localStorage.getItem('formDataStorage'))
this.formData.hubHandleTime= formDataStorage.hubHandleTime
this.formData.hubOrgInfoId= formDataStorage.hubOrgInfoId
this.formData.hubDeptMutualId= formDataStorage.hubDeptMutualId
}
// 恢復成默認的false，避免isBack一直是true，導致下次無法獲取數據
? this.$route.meta.isBack=false
},
鉤子函數的執行順序
不使用keep-alive
?beforeRouteEnter --> created --> mounted --> destroyed
使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次進入緩存的頁面，只會觸發beforeRouteEnter -->activated --> deactivated 。created和mounted不會再執行。我們可以利用不同的鉤子函數，做不同的事。務必理解上述鉤子函數的執行時機和執行順序。
activated和deactivated是使用keep-alive后，vue中比較重要的兩個鉤子函數，建議詳細了解下。
