vue中记录滚动条位置的两种方法
爱敲码的老余 人气:01、方法一
在点击的时候记录滚动条位置,存入本地
再次进入该路由读取滚动跳位置
1、1 跳转时路由存入scroll 如果要有多个页面,可以把名称也存进去,这里默认一个页面
methods: { go() { console.log(document.documentElement.scrollTop) localStorage.setItem("scroll", document.documentElement.scrollTop) this.$router.push({path: '/'}) } }
1、2 读取scroll位置 再次进入该路由时从本地录取scroll位置
利用scrollBehavior ,在
router/index.js
中,配置路由中的scrollBehaviors
事件
const router = new VueRouter({ mode: 'hash', routes, scrollBehavior(to, from){ if(to.name==='fatherSlot'){ //name为路由名字 return {x:0, y: parseInt(localStorage.getItem('scroll'))}//读取本地的scroll } console.log("to",to,"from",from) } })
2、方法二
利用
vue
的keep-alive
, 使用缓存机制来记录滚动条位置
但是有个缺点,页面刷新后就不记录了,但是简单高效
2、1 配置需要缓存的路由 缓存pageA
,pageB
,里面代码都一样,如演示图一样。pageA
,pageC
为组件的名字.
html
<keep-alive :include="['pageA','pageC']"> <router-view/> </keep-alive>
2、2 在路由内记录滚动位置
javascript
data() { return { curScrollTop: 0 //记录滚动条位置对象 } }, //此钩子函数会反复触发,是keep-alive特有的钩子函数,取 activated() { document.documentElement.scrollTop = this.curScrollTop || 0 }, //路由离开时的钩子函数,存 beforeRouteLeave (to, from, next) { this.curScrollTop = document.documentElement.scrollTop || 0 next() },
总结
加载全部内容