有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue路由返回上一页(VUE页面跳转后返回原页面离开前位置)

vue 炮渣日记 3周前 (11-19) 13次浏览 已收录 0个评论 扫描二维码

业务场景:一客户手机端界面,一些数据是通过参照界面(界面:referList)选择数据,然后将数据带到本界面(界面:detail),通过路由跳转时每次跳转都会返回到页面顶端,对客户使用非常不友好。

解决思路:路由离开时,将页面位置加入缓存中,再次返回时读取缓存中页面位置,然后赋值到页面。

vue路由返回上一页(VUE页面跳转后返回原页面离开前位置)

页面选择收货人后进入参照界面

vue路由返回上一页(VUE页面跳转后返回原页面离开前位置)

参照界面选择数据后跳回原页面并赋值

vue路由返回上一页(VUE页面跳转后返回原页面离开前位置)

但是返回的是顶部,而不是原位置,客户使用不方便

代码如下:

<script>

export default {

beforeRouteLeave(to, from, next){

//记录离开页面的位置

let position = window.scrollY;

if (position == null){

position = 0;

}

//加入到缓存

let dataStorageHo = {position:position}

this.$store.dispatch(‘UPDATE_STORAGE’, {

storageData:dataStorageHo

});

//必须要加这个,进行下一个钩子函数

next();

},

watch:{

‘$route’ (to, from) {

//返回到本页面时

if (to.name === ‘detail’) {

this.datatype = this.$store.state.storage.storageData||0;

let position = this.datatype.position||0;

//将缓存位置赋值过来定位

window.scroll(0, position);

}

}

}

}

</script>

缓存使用的是storage,同时界面加了keep-alive:

<template>

<div>

<keep-alive>

<router-view></router-view>

</keep-alive>

</div>

</template>

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址