Fork Me On Github

vue 返回上一页回到原先滚动位置

在一些页面,比如滚动加载的页面默认无法后退保存之前的滚动位置。但需要这个功能该怎么做?

App.vue

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

router

在路由中需加上 keepAlive: true

{
    name: 'search',
    path: '/search',
    component: Search,
    meta: {
        keepAlive: true, // 需要缓存
    },
}, 

页面上

在需要的页面 .vue 里加上事件,mounted 事件只在新进入时触发,或离开页面后缓存页面时触发(这时是获取不到任何页面元素的)

data() {
    return {
        scrollTop: 0,
    };
},
beforeRouteLeave (to, from, next) {
    // this.scrollTop = document.querySelector('.scroll-box').scrollTop; // div内部滚动的
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    next();
},
beforeRouteEnter(to, from, next) {
    next(vm => {
        // document.querySelector('.scroll-box').scrollTop = vm.scrollTop;// div内部滚动的
        document.body.scrollTop = vm.scrollTop;
    });
},

注意:以上事件只能放到页面上面,不能放到页面上的部件里

参考

  1. vue返回上一页面时回到原先滚动的位置
点击查看全文
0 27 0