今天小编就为大家分享一篇vue中进入详情页记住滚动位置的方法(keep-alive)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
> 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置，这里我就想到了keep-alive
1.首先在路由中引入需要的模块
{ path: ‘/scrollDemo', name: ‘scrollDemo', meta: { keepAlive: true // 需要缓存 }, component: resolve => { require([‘../view/scrollDemo.vue'], resolve) } }
2.在App.vue中设置缓存组件
// 缓存组件跳转的页面 // 非缓存组件跳转页面
3.在页面注册对应的事件
1. 在return中定义一个初始值 scroll
2. 在mouted中 ，mouted中的方法代表dom已经加载完毕
window.addEventListener('scroll', this.handleScroll);
3.methods 用于存放页面函数
handleScroll () { this.scroll = document.documentElement && document.documentElement.scrollTop console.log(this.scroll) }
4. activated 为keep-alive加载时调用
activated() { if(this.scroll > 0){ window.scrollTo(0, this.scroll); this.scroll = 0; window.addEventListener('scroll', this.handleScroll); } }
5.deactivated 页面退出时关闭事件 防止其他页面出现问题
deacti<div>本文来源gaodai.ma#com搞#代!码网_</div>vated(){ window.removeEventListener('scroll', this.handleScroll); }
以上就是vue中进入详情页记住滚动位置的方法(keep-alive)的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue中进入详情页记住滚动位置的方法(keep-alive)
转载请注明原文链接：vue中进入详情页记住滚动位置的方法(keep-alive)
