「源码」VUE页面跳转后返回原页面离开前位置

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

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

代码如下：

<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>