vue 路由跳转记住滚动位置,返回时回到上次滚动位置
参考:https://blog.csdn.net/qq_40204835/article/details/79853685
方法一: 利用Keep-Alive和监听器
1.首先在路由中引入需要的模块
{ path: ‘/scrollDemo’, name: ‘scrollDemo’, meta: { keepAlive: true // 需要缓存 }, component: resolve => { require([‘../view/scrollDemo.vue’], resolve) } }
2.在App.vue中设置缓存组件
<keep-alive> // 缓存组件跳转的页面 <router-view v-if="$route.meta.keepAlive" class="ui-view" transition-mode="out-in"></router-view> </keep-alive> // 非缓存组件跳转页面 <router-view v-if="!$route.meta.keepAlive" class="ui-view" transition-mode="out-in"></router-view>
3.在页面注册对应的事件
(1). 在data中定义一个初始值 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 页面退出时关闭事件 防止其他页面出现问题
deactivated(){ window.removeEventListener('scroll', this.handleScroll); }
方法二:利用beforeRouteLeave和watch
main.js中:
var store = new Vuex.Store({ //记得先引入vuex state: { recruitScrollY: 0 }, getters: { recruitScrollY: state => state.recruitScrollY }, mutations: { changeRecruitScrollY(state, recruitScrollY) { state.recruitScrollY = recruitScrollY; } }, actions: { }, modules: {} })
组件中(/flashSaleListX为当前组件,即需要记住滚动条位置的组件):
methods:{ isTabRoute: function() { if (this.$route.path === '/flashSaleListX') { let recruitScrollY = this.$store.state.recruitScrollY document.documentElement.scrollTop = recruitScrollY; } } }, watch: { '$route': 'isTabRoute', }, beforeRouteLeave(to, from, next) { let position = document.documentElement && document.documentElement.scrollTop; //记录离开页面时的位置 if (position == null) position = 0 this.$store.commit('changeRecruitScrollY', position) //离开路由时把位置存起来 next() }
方法三:(适用于方法二获取不到滚动位置)
组件中:
<template> <div ref="div1">
··· 内容···
</div> </template>
beforeRouteEnter(to, from, next) { next(vm => { const div1 = vm.$refs.div1 // 记录滚动高度 div1.scrollTop = vm.scroll }) }, beforeRouteLeave(to, from, next) { const div1 = this.$refs.div1; this.scroll = div1.scrollTop; //data中记得定义变量scroll next() }
注:在路由配置中,记住滚动的页面keep-alive需为true