溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關怎么在vue2中使用keep-alive緩存多層列表頁，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
路由到詳情頁，然后詳情頁加載列表頁組件展現，然后在組件模塊通過props:[‘id']獲取數據
import Vmothod from '../page/ApiMethodTable.vue'; import VsystemParam from '../page/ApiSystemParamTable.vue'; import VsystemError from '../page/ApiSystemErrorTable.vue'; <template> <div> <Vmothod :id="id"></Vmothod> <VsystemParam :id="id"></VsystemParam> <VsystemError :id="id"></VsystemError> </div> </template>
但是如此以來，在返回上一層或者修改數據回跳后，因為沒有頁面緩存，所以頁數會變成第一頁，使用上很不方便。
在網上找了相關解決方案后，我試著在路由上加入了keep-alive參數。
meta: { keepAlive: true }<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
這樣解決了頁面不緩存的問題，但跳轉之后所有頁面都是一模一樣的數據，這就很不對了。后臺發覺還要在頁面初始化時加入鉤子函數拉取數據
activated(){
this.getData();
}但是發覺還是不行，上一頁通過props:[‘id']傳遞到組件參數也會被緩存，如此以來props不能用了，只有通過在路由來傳遞參數。
在路由的時候帶上id參數
path:'/method/:id'
然后在組件頁面獲取參數
self.$route.params.id
關于怎么在vue2中使用keep-alive緩存多層列表頁就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
