Vue 详情页返回列表页，不刷新页面，并且保留列表页原来滚动条所在位置

前言：

最近公司有个移动端H5的项目，是前后端分离的，所以前端就Vue + Vux来做，项目是用vue-cli3生成的，其中就有这样的一个需求，在新闻列表页中向下滑动后，随别打开一个新闻，进入该新闻的详情页面，当看完后，从详情页返回到新闻列表页。这时，列表页重新请求接口数据，重新渲染DOM，而且滚动条也回到了最顶上的第1个新闻了。这样不仅性能不好，还会影响用户的体验效果。

 

问题分析：

1、从新闻详情页面返回新闻列表页后，新闻列表页重新渲染了DOM。

2、如果在新闻列表页向下滑动后，才进入新闻详情页面时，返回新闻列表页后滚动条回到最顶上了。

 

实现思路：

1、通过<keep-alive>容器组件，将页面缓存起来。

2、当路由跳转到其他页面时： beforeRouteLeave()方法，和 beforeRouteEnter()方法， 来记录 和 恢复滚动条的位置。

 

解决方法：

1、在router.js文件中，给News新闻列表页路由中添加 meta: {   keepAlive: true    //开启缓存  }，代码如下：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Main',
      name: 'Main',
      component: () => import('../views/Main.vue')
    },
    {
      path: '/',
      name: 'News',
      component: () => import('../views/News.vue'),
      meta: {
        keepAlive: true    //开启缓存
      }
    },
    {
      path: '/Info',
      name: 'Info',
      component: () => import('../views/Info.vue')
    }
  ]
})

 

2、在App.vue文件中，在<template>中的<router-view />用<keep-alive>包裹起来，代码如下：

<template>
  <div id="app">
    <keep-alive>
          <!-- 如果当前打开页面的路由中 keepAlive: true （开启了缓存时） -->
          <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
        
    <!-- 如果当前打开页面的路由中 没有 或者为 keepAlive: false （关闭缓存时[默认就是false]） -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

通过以上的两步设置以后，从新闻详情页面再返回新闻列表页时，新闻列表页就不会再重新渲染DOM了。

 

3、在News.vue页面中，添加以下两个监听方法，用于记录离开新闻列表页面时滚动条所在的位置，当返回新闻列表页面时设置滚动条的位置为之前所记录的值。

// 离开路由之前执行的函数

  beforeRouteLeave(to, from, next) {

    // 如果在window中出现的滚动条
    // this.scroll = window.scrollTop;

    //  如果在某个指的元素中出现的滚动条 就在该素中添加ref属性，如：ref="listBox"
    this.scroll = this.$refs.listBox.scrollTop;
    
    next()
  },
  



  // 进入路由之前执行的函数

  beforeRouteEnter(to, from, next) {
    next(vm => {

      // 如果在window中出现的滚动条
      // window.scrollTop = vm.scroll;

      // 如果在某个指的元素中出现的滚动条 就在该素中添加ref属性，如：ref="listBox"
      vm.$refs.listBox.scrollTop = vm.scroll
    })
  }

注：我的滑动区域是在指定的div元素中出现的滚动条

通过以上的三步设置以后，从新闻详情页面再返回新闻列表页时，新闻列表页就不会再重新渲染DOM，返回列表页后，滚动条也回到了原来的位置。

 

扩展：

如何在vue中实时查看滚动条，滚动的位置的值。

 mounted() {
    // 监听window中滚动条的位置
    window.addEventListener('scroll', function(){
     let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scrollTop);
    });

    // 监听指定某个元表滚动条的位置
    document.querySelector('#listBox').addEventListener('scroll', function(){
      let scrollTop = this.pageYOffset || this.scrollTop;
      console.log(scrollTop);
}