這篇文章將為大家詳細講解有關怎么在vue2中使用keep-alive緩存多層列表頁，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

貴定網站制作公司哪家好，找創(chuàng)新互聯公司！從網頁設計、網站建設、微信開發(fā)、APP開發(fā)、響應式網站設計等網站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯公司從2013年成立到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創(chuàng)新互聯公司。

路由到詳情頁，然后詳情頁加載列表頁組件展現，然后在組件模塊通過props:[‘id']獲取數據

import Vmothod from '../page/ApiMethodTable.vue';
import VsystemParam from '../page/ApiSystemParamTable.vue';
import VsystemError from '../page/ApiSystemErrorTable.vue';

但是如此以來，在返回上一層或者修改數據回跳后，因為沒有頁面緩存，所以頁數會變成第一頁，使用上很不方便。

在網上找了相關解決方案后，我試著在路由上加入了keep-alive參數。

meta: { keepAlive: true }

這樣解決了頁面不緩存的問題，但跳轉之后所有頁面都是一模一樣的數據，這就很不對了。后臺發(fā)覺還要在頁面初始化時加入鉤子函數拉取數據

 activated(){
  this.getData();
 }

但是發(fā)覺還是不行，上一頁通過props:[‘id']傳遞到組件參數也會被緩存，如此以來props不能用了，只有通過在路由來傳遞參數。

在路由的時候帶上id參數

path:'/method/:id'

然后在組件頁面獲取參數

self.$route.params.id

關于怎么在vue2中使用keep-alive緩存多層列表頁就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。