vue实现返回上一页面，页面停留在原来位置，不刷新

Posted 2023-05-09

参考技术A 配置路由

配置App.vue文件种的<router-view/>

使用this.$router.back()返回
当用户在详情页点击返回的按钮时，我们把按钮的返回事件 this.router.back()， 必须用这个才能生效

vue-scroller返回页面记住滚动位置

参考技术A 1，设置keepAlive：是否缓存
router:

path: '/actlist',
name: 'actlist',
component: actlist,
meta:
keepAlive: true


2,设置渲染页面
app.vue
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
3,记录滚动位置并赋值
beforeRouteEnter(to,from,next)
if(!sessionStorage.askPositon || from.path == '/')//当前页面刷新不需要切换位置
sessionStorage.askPositon = '';
next();
else
next(vm =>
if(vm && vm.$refs.my_scroller)//通过vm实例访问this
setTimeout(function ()
vm.$refs.my_scroller.scrollTo(0, sessionStorage.askPositon, true);
,0)//同步转异步操作

)

,
beforeRouteLeave(to,from,next)//记录离开时的位置
sessionStorage.askPositon = this.$refs.my_scroller && this.$refs.my_scroller.getPosition() && this.$refs.my_scroller.getPosition().top;
next()
,