vue页面设置点击详情返回后保留滑动位置

Willis_m

已于 2022-11-29 11:11:35 修改

阅读量963

点赞数 1

文章标签： vue.js 前端

于 2022-11-29 11:10:44 首次发布

本文链接：https://blog.csdn.net/qq_43544447/article/details/128093848

版权

App.vue文件配置：

<template>
  <div id="app">
    <!--页面返回不刷新-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

route/index.js文件配置：

var router = new Router({
	  routes: [
	    {
	      path: '/',
	      name: 'login',
	      component: resolve => require(['@/components/login/login'], resolve)
	    }, {
	      path:'/details',
	      name:'details',
	      meta: {keepAlive: true}, //开启缓存
	      component:resolve=>require(['@/components/proxy/details'],resolve)
	    }
	 ]
 })

details.vue显示页面配置（方法与computed、methods平级）：

    //在页面离开时记录滚动位置
    beforeRouteLeave(to, from, next) {
      console.log("beforeRouteLeave");
      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // console.log("beforeRouteLeave scrollTop ", this.scrollTop);
      next()
    },
    //进入该页面时，用之前保存的滚动位置赋值
    beforeRouteEnter(to, from, next) {
      console.log("beforeRouteEnter");
      next(vm => {
        document.body.scrollTop = vm.scrollTop;
        document.documentElement.scrollTop = vm.scrollTop;
      })
    }