情况首先这个项目是一个h5项目，有一个滑动列表页。当我滑动并单击列表项时，它将进入详细信息页面。当我退出的时候，我希望它还能走到刚才点进来的地方。Task我们的目的是定位滑动的位置。返回时，应回到刚才滑动的位置。所以有两个关键点，第一个是如何定位滑动位置，第二个是返回时如何回到滑动位置。对于滑动位置，我们可以获取滑动容器的scrollTop值，然后在回位时设置滑动容器的scrollTop。行动1。使用scrollBehavior函数来使用前端路由。当切换到新的路由时，你希望页面滚动到顶部，或者保持原来的滚动位置，就像重新加载页面一样。vue-router可以做到，而且更好的是，它允许你自定义路由切换时页面如何滚动。constrouter=newVueRouter({routes:[...],scrollBehavior(to,from,savedPosition){//返回预期的滚动位置}})scrollBehavior方法接收到和来自路由对象。第三个参数savedPosition当且仅当popstate被导航（由浏览器的前进/后退按钮触发）时才可用。所以在router定义的地方，挂载了scrollBehavior函数。问题：savedPosition打印的x和y坐标不是你想要的，也不准确。分析：因为scrollBehavior是挂载在路由body上的，所以应该对应一个完整的路由组件，而我的滑动区域是组件内部的一个固定区域，也就是说我应该把scrollTop挂在滑动区域上，但是整个页面结构不允许我这样做。于是试试第二种方法，keep-alive2。keep-alive什么是Keep-alive？这不是http保持长链接的keep-alive。Keepalive是Vue的内置组件，它可以使包含的组件保持状态或避免重新渲染。就是所谓的组件缓存但是有一个问题就是不会缓存我们滑动的位置，需要我们手动记录位置。A。滑动时记录滑动组件的scrollTop（这里可以加一个节流功能）onScroll(e:Event){const{scrollTop}=e.targetasHTMLElement;this.scrollTop=scrollTop;//记录滑动位置，回来时恢复到这个位置}keep-alive的语句循环在页面第一次进入时执行，钩子的触发顺序：created->mounted->activated，退出时触发deactivated,以及只有在重新进入（forwardorbackward）时才会触发触发事件挂载等方法，只执行一次，放在mounted中；组件每次执行的方法都放在activated；b.于是定位到激活语句循环中的位置activated(){//恢复之前保存的位置(this.$refs.scrollerasHTMLElement).scrollTop=this.scrollTop;}这样我们的问题就解决了，但是也带来新的问题。当我滑动列表，然后退出，进入首页，然后从首页开始进入列表页，刚才的滑动位置会被缓存，数据也被缓存，不是最新的数据，这显然不是我们想要的效果。出现这个问题的原因是我用keep-alive缓存了列表页，从首页进入时，还是使用缓存的数据。那我们就可以动态决定什么时候缓存列表页，什么时候不缓存呢？解决方法：使用keep-aliveinclude和exclude来判断缓存的组件。exclude表示不缓存的组件名，inclde表示缓存的组件名。当两者同时存在时，exclude的优先级更高，所以我们使用动态获取exclude的值来实现动态缓存。那么如何动态修改exclude的值呢？使用路由导航守卫router.beforeEach来判断，当我们下一个路由跳转到首页时，我们将exlude值改为列表页的名称，其他情况为空字符串。Resultkeepalive包含的组件不会再次初始化，也就是说不会重新访问生命周期函数。但是我们可以通过activated和deactivated两个生命周期来控制它。并且还要避免重新加载数据。但是考虑到某些情况下我们需要它重新加载数据，所以我们需要动态决定组件是否需要缓存，通过keep-alive的include和exclude属性，同时使用include和exclude，优先级exclude较高，动态加载exclude，这个值在路由导航守卫router.beforeEach中动态修改。思考：因为之前的技术栈是react，所以每次写vue的时候都会下意识的想如果用react我会怎么实现。在React中，我们通常使用路由来管理不同的页面，而在切换页面时，路由会卸载不匹配的页面组件，所以在上面的列表页示例中，当用户从详情页返回到列表页时，会返回到列表页顶部，由于列表页组件被路由卸载后重新构建，状态丢失。如果按照之前的做法，我可能会在onScroll事件上监听滑动，或者在点击列表项时获取容器的scrollTop，然后将scrollTop保存在我们的model中，需要判断路由状态。如果是从详情页跳转的，需要读取scrollTop，定位到componentDidMount中。如果是从其他页面进入列表页面，比如首页，不需要重新定位
