前言：
最近公司有个移动端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);}
