vue从其它页面返回_vue---详细页点返回列表页,停留在原先位置

列表页面,点击进入到详情页面,在详情页面向下滑动时,滚动条变化,document.documentElement.scrollTop变化,点击返回按钮时,列表页面的document.documentElement.scrollTop自动定位到了详情页面的位置。不止H5,PC端开发中也遇到过此类问题。

页面跳转后,回到此页面时,页面不刷新

概述问题:

页面跳转后,回到此页面时,页面不刷新

H5在详细页点返回,返回时列表页停留在原来的位置(多用于列表页与详情编辑页之间的跳转)

实现原理:

keep-alive与vue-router配合使用

问题一:

暂且分为1、2、3个页面。

从1进入到2,在从2进入到3,此时缓存,2不刷新;

从2返回到1时,不做缓存;

从1再次点击进入到2,在从2进入到3,此时从3返回时,带上了上次的缓存记录。

这个记录怎么清除啊?

beforeRouteEnter(to, from, next) {

if(from.path === "/memberDetails"){//详情页面返回时

document.documentElement.scrollTop = to.meta.scollTopPosition;

next()

}else{

next()

}

},

beforeRouteLeave(to, from, next) { //在离开时修改keepAlive值

if(to.path==='/memberDetails'){//当我们进入到C时开启B的缓存

from.meta.keepAlive = true

from.meta.scollTopPosition = document.documentElement.scrollTop;

next();

}else{

from.meta.keepAlive = false;

from.meta.scollTopPosition = 0

this.$destroy()

next(); //当我们前进的不是C时我们让B页面刷新

}

}

复制代码

详细做法:keep-alive与vue-router配合使用

需求:

列表页打开后,从其他页面进来时不刷新数据;

详情页返回至列表页时,数据不刷新,同时浏览位置不改变;

编辑页返回列表页时,表格该行数据刷新,浏览位置不改变;

实现思路:

使用keep-alive来缓存页面;

使用路由跳转时:beforeRouteEnter和beforeRouteLeave 来保存滚动的位置;

当详情页可以编辑时,记录表格行的index以及ID,保存返回到列表页时查询数据 刷新表格行数据;

在整个页面框架中需要进行是否缓存的设置

复制代码

在路由配置中设置页面是否缓存以及滚动条的位置(这里的滚动条不一定是body的,也有可能是表格内部的或者是某个容器的)

{

path: 'index/query',

component: resolve =>

require([

'@/components/data_center/xxx/index.vue',

], resolve),

meta: {

keepAlive: true,

scollTopPosition: 0

}

}

复制代码

@keepAlive:是否缓存

@scollTopPosition:滚动条位置

在页面入口文件.vue中,配置beforeRouteEnter和beforeRouteLeave(在离开该页时记录scollTopPosition,当从详情页返回时,再把记录的位置赋给对应容器的滚动条)

beforeRouteEnter(to, from, next) {

next(vm => {

if (from.path === "xxx") {

document.getElementById('home_scheme_query').scrollTop = to.meta.scollTopPosition;

}

});

},

beforeRouteLeave(to, from, next) {

if(from.meta.keepAlive) {

  from.meta.scollTopPosition = document.getElementById('home_scheme_query').scrollTop;

}

next();

}

复制代码// list.vue

created() {

this.getList()

},

beforeRouteEnter(to, from, next) {

if (to.name === 'productList' && from.name === 'ProductSkuM') {

to.meta.keepAlive = true // 让列表页缓存,即不刷新

next()

} else {

to.meta.keepAlive = false // 让列表页即不缓存刷新

next()

}

},

activated() {

console.log('缓存') // 方便我测试看的

},

复制代码

以上就是列表页跳转到详情页,页面数据缓存的一种解决方案。

从列表页中的表格内部跳转到详情页,当详情页存在编辑的能力时

跳转到详情页时记录数据在表格的哪一行($index)以及id(数据相对简单 可记录在query中);

详情页保存时,返回到列表页触发方法,根据id得到该行数据,然后刷新该行数据即可[vm.$set(vm.array,index,newValue)或者vm.array.splice(index,1,newValue)];

vue的activated和deactivated生命周期

包裹的动态组件会被缓存,它是一个抽象组件,它自身不会渲染一个dom元素,也不会出现在父组件链中。当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

如包裹两个组件:组件A和组件B。当第一次切换到组件A时,组件A的created和activated生命周期函数都会被执行,这时通过点击事件改变组件A的文字的颜色,在切换到组件B,这时组件A的deactivated的生命周期函数会被触发;在切换回组件A,组件A的activated生命周期函数会被触发,但是它的created生命周期函数不会被触发了,而且A组件的文字颜色也是我们之前设置过的。

参考链接:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值