背景:
1。数据列表页,滚动加载数据;
2。多条数据情况下,点击某一条,进入详细页进行编辑(修改,删除)操作,
3。保存返回上一页;
在上面的情况下,想要保持在上次浏览位置,并且保持数据是最新的;
1。原始的办法:在点击详情页的时候,记住浏览位置,传递参数或者存到本地缓存,然后在详情页操作完毕后,返回的时候,路由守卫可以判断,是否详情页跳转回来的,然后让页面滚动到上次记录的位置;
思路是这样,实际操作很麻烦;
2。推荐办法:使用vue动态组件维生,搭配路由守卫函数beforeRouteLeave,以及激活钩子函数;
对于钩子函数执行顺序,以及作用详细说明,请参考vue组件的生命周期
我的步骤是按照开发思路进行的,场景就是从商品列表页,在商品详细页——在商品列表(数据缓存);
开发之前看到网上好多人都是在路由文件里面配置
<代码>元:{keepAlive:真}
但我觉得没有必要,因为列表页不是一直需要缓存数据的,假如从首页进入,则不需要,所以就在路由守卫函数中判断是否需要缓存数据即可。
以下代码,使用list.vue代表列表页;detail.vue代表详细页;
<强>
detail.vue
beforeRouteLeave(下),从{
如果(to.name===M2mBoard) {
to.meta。keepAlive=true
}
next ()
}
由于keepAlive是vue2.0中内置组件,所以设置页面路由<代码>元。即keepAlive=true可缓存数据,路由跳转是利用函数<代码>。美元router.go(1);>
detail.vue
beforeRouteLeave(下),从{
如果(to.name===M2mBoard) {
to.meta。keepAlive=true
}
如果(this.isChange) {
让changeData=https://www.yisu.com/zixun/{
inquiryNo: this.inquiry.inquiryNo,
inquiryTitle: this.inquiry.inquiryTitle
}
window.sessionStorage。setItem (changeData, JSON.stringify (changeData))
}
to.meta。isChange=this.isChange
next ()
}
列表页中判断一下,是否需要修改数据:
list.vue
激活(){
如果(这一点。route.meta.isChange美元){
让changeData=https://www.yisu.com/zixun/JSON.parse (window.sessionStorage.getItem (changeData))
this.list。forEach(项=比;{
如果项目。inquiryNo===changeData.inquiryNo) {
项。inquiryTitle=changeData.inquiryTitle
}
})
}
}
之前
激活钩子函数,在点火电极组件激活时自动执行,判断如果需要修改,从本地取出数据,循环列表数据,找出需要修改的那一条,进行显示数据的修改(因为是临时修改,所以只修改显示的参数即可);
detail.vue
beforeRouteLeave(下),从{
如果(to.name===' M2mBoard ',,! this.idDel) {
to.meta。keepAlive=true
}
next ()
}
删除操作,可以排除后直接不用缓存,或者跟修改一样的操作,判断是删除,临时删除,列表中缓存的数据也可以;
上面3种情况通常会同时出现,所以最后的写法就是:
detail.vue
beforeRouteLeave(下),从{
如果(to.name===' M2mBoard ',,! this.idDel) {
to.meta。keepAlive=true
}
如果(this.isChange) {
让changeData=https://www.yisu.com/zixun/{
inquiryNo: this.inquiry.inquiryNo,
inquiryTitle: this.inquiry.inquiryTitle
}
window.sessionStorage。setItem (changeData, JSON.stringify (changeData))
}
to.meta。isChange=this.isChange
next ()
}
list.vue
beforeRouteLeave(下),从{
from.meta。keepAlive=false
next ()
},
激活(){
如果(这一点。route.meta.isChange美元){
让changeData=https://www.yisu.com/zixun/JSON.parse (window.sessionStorage.getItem (changeData))
this.list。forEach(项=比;{
如果项目。inquiryNo===changeData.inquiryNo) {
项。inquiryTitle=changeData.inquiryTitle
}
})
}
}
列表页种路由跳转的时候需要进行元。keepAlive=false操作,防止出现,从detail.vue跳转回来后,list.vue在与其他页面进行路由跳转的时候,始终处于缓存状态,数据不更新现象;
