需求分析
背景:
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的整個思路;記錄一下,以免忘記,還有歡迎參考與指正。