需求分析

為鐵嶺縣等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及鐵嶺縣網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站建設(shè)、鐵嶺縣網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

背景：

1.數(shù)據(jù)列表頁，滾動加載數(shù)據(jù)；

2.多條數(shù)據(jù)情況下，點(diǎn)擊某一條，進(jìn)入詳細(xì)頁進(jìn)行編輯（修改，刪除）操作；

3.保存返回上一頁；

在上面的情況下，想要保持在上次瀏覽位置，并且保持?jǐn)?shù)據(jù)是最新的；

解決辦法

1.原始的辦法：在點(diǎn)擊詳情頁的時候，記住瀏覽位置，傳遞參數(shù)或者存到本地緩存，然后在詳情頁操作完畢后，返回的時候，路由守衛(wèi)可以判斷，是否詳情頁跳轉(zhuǎn)回來的，然后讓頁面滾動到上次記錄的位置；

思路是這樣，實際操作很麻煩；

2.推薦辦法：使用vue動態(tài)組件keep-alive,搭配路由守衛(wèi)函數(shù)beforeRouteLeave，以及activated鉤子函數(shù)；

對于鉤子函數(shù)執(zhí)行順序，以及作用詳細(xì)說明，請參考vue組件的生命周期

步驟詳解

我的步驟是按照開發(fā)思路進(jìn)行的，場景就是從商品列表頁——>商品詳細(xì)頁——>商品列表（數(shù)據(jù)緩存）；

開發(fā)之前看到網(wǎng)上好多人都是在路由文件里面配置

meta:{keepAlive:true}

但我覺得沒有必要，因為列表頁不是一直需要緩存數(shù)據(jù)的，假如從首頁進(jìn)入，則不需要，所以就在路由守衛(wèi)函數(shù)中判斷是否需要緩存數(shù)據(jù)即可；

以下代碼，使用list.vue代表列表頁；detail.vue代表詳細(xì)頁；

場景1：點(diǎn)擊返回，判斷路由跳轉(zhuǎn)的是否是需要緩存的列表頁：

detail.vue

beforeRouteLeave (to, from, next) {
 if (to.name === 'M2mBoard') {
 to.meta.keepAlive = true
 }
 next()
 }

分享名稱：VuekeepAlive數(shù)據(jù)緩存工具實現(xiàn)返回上一個頁面瀏覽的位置-創(chuàng)新互聯(lián)
文章路徑：http://chinadenli.net/article4/cojgoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、服務(wù)器托管、手機(jī)網(wǎng)站建設(shè)、外貿(mào)建站、企業(yè)建站、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)