需求分析
成都創新互聯主要從事成都網站制作、成都網站設計、網頁設計、企業做網站、公司建網站等業務。立足成都服務金秀,10年網站建設經驗,價格優惠、服務專業,歡迎來電咨詢建站服務:18982081108
背景:
1.數據列表頁,滾動加載數據;
2.多條數據情況下,點擊某一條,進入詳細頁進行編輯(修改,刪除)操作;
3.保存返回上一頁;
在上面的情況下,想要保持在上次瀏覽位置,并且保持數據是最新的;
解決辦法
1.原始的辦法:在點擊詳情頁的時候,記住瀏覽位置,傳遞參數或者存到本地緩存,然后在詳情頁操作完畢后,返回的時候,路由守衛可以判斷,是否詳情頁跳轉回來的,然后讓頁面滾動到上次記錄的位置;
思路是這樣,實際操作很麻煩;
2.推薦辦法:使用vue動態組件keep-alive,搭配路由守衛函數beforeRouteLeave,以及activated鉤子函數;
對于鉤子函數執行順序,以及作用詳細說明,請參考vue組件的生命周期
步驟詳解
我的步驟是按照開發思路進行的,場景就是從商品列表頁——>商品詳細頁——>商品列表(數據緩存);
開發之前看到網上好多人都是在路由文件里面配置
meta:{keepAlive:true}
但我覺得沒有必要,因為列表頁不是一直需要緩存數據的,假如從首頁進入,則不需要,所以就在路由守衛函數中判斷是否需要緩存數據即可;
以下代碼,使用list.vue代表列表頁;detail.vue代表詳細頁;
場景1:點擊返回,判斷路由跳轉的是否是需要緩存的列表頁:
detail.vue
beforeRouteLeave (to, from, next) { if (to.name === 'M2mBoard') { to.meta.keepAlive = true } next() }
由于keepAlive是vue2.0中內置組件,所以設置頁面路由meta.keepAlive = true
即可緩存數據,路由跳轉是利用函數this.$router.go(-1);
就可以顯示在上次瀏覽的記錄位置;
場景2:編輯詳細頁數據,回到列表頁,則需要將修改的數據保存到本地,然后在列表頁的緩存數據中,更改顯示即可:
detail.vue
beforeRouteLeave (to, from, next) { if (to.name === 'M2mBoard') { to.meta.keepAlive = true } if (this.isChange) { let changeData = { inquiryNo: this.inquiry.inquiryNo, inquiryTitle: this.inquiry.inquiryTitle } window.sessionStorage.setItem('changeData', JSON.stringify(changeData)) } to.meta.isChange = this.isChange next() }
列表頁中判斷一下,是否需要修改數據:
list.vue
activated () { if (this.$route.meta.isChange) { let changeData = JSON.parse(window.sessionStorage.getItem('changeData')) this.list.forEach(item => { if (item.inquiryNo === changeData.inquiryNo) { item.inquiryTitle = changeData.inquiryTitle } }) } }
activated 鉤子函數,在keep-alive組件激活時自動執行,判斷如果需要修改,從本地取出數據,循環列表數據,找出需要修改的那一條,進行顯示數據的修改(因為是臨時修改,所以只修改顯示的參數即可);
場景3:在詳細頁點擊刪除該條數據
detail.vue
beforeRouteLeave (to, from, next) { if (to.name === 'M2mBoard' && !this.idDel) { to.meta.keepAlive = true } next() }
刪除操作,可以排除后直接不用緩存,或者跟修改一樣的操作,判斷是刪除,臨時刪除,列表中緩存的數據也可以;
上面3種情況通常會同時出現,所以最后的寫法就是:
detail.vue
beforeRouteLeave (to, from, next) { if (to.name === 'M2mBoard' && !this.idDel) { to.meta.keepAlive = true } if (this.isChange) { let changeData = { inquiryNo: this.inquiry.inquiryNo, inquiryTitle: this.inquiry.inquiryTitle } window.sessionStorage.setItem('changeData', JSON.stringify(changeData)) } to.meta.isChange = this.isChange next() }
list.vue
beforeRouteLeave (to, from, next) { from.meta.keepAlive = false next() }, activated () { if (this.$route.meta.isChange) { let changeData = JSON.parse(window.sessionStorage.getItem('changeData')) this.list.forEach(item => { if (item.inquiryNo === changeData.inquiryNo) { item.inquiryTitle = changeData.inquiryTitle } }) } }
列表頁種路由跳轉的時候需要進行meta.keepAlive = false操作,防止出現,從detail.vue跳轉回來后,list.vue在與其他頁面進行路由跳轉的時候,始終處于緩存狀態,數據不更新現象;
注意:在info.vue跳轉list.vue的路由活動最好使用this.$router.go(-1)
,不然回到list.vue頁面,數據緩存了,但是頁面位置不會是上次訪問的位置;具體原因還在研究,哈哈哈...
ok,上面就是在項目開發使用中用到的keep-alive的整個思路;記錄一下,以免忘記,還有歡迎參考與指正。
以上所述是小編給大家介紹的Vue keepAlive 數據緩存工具實現返回上一個頁面瀏覽的位置,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
新聞名稱:VuekeepAlive數據緩存工具實現返回上一個頁面瀏覽的位置
本文網址:http://m.newbst.com/article28/ispgcp.html
成都網站建設公司_創新互聯,為您提供自適應網站、網站內鏈、云服務器、手機網站建設、營銷型網站建設、域名注冊
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯