vue 记录滚动位置_vue 路由跳转记住滚动位置，返回时回到上次滚动位置
方法一： 利用Keep-Alive和監(jiān)聽器
1.首先在路由中引入需要的模塊
{
path: ‘/scrollDemo’,
name: ‘scrollDemo’,
meta: {
keepAlive:true //需要緩存
},
component: resolve=> { require([‘../view/scrollDemo.vue’],
resolve) }
}
2.在App.vue中設(shè)置緩存組件
//緩存組件跳轉(zhuǎn)的頁面
//非緩存組件跳轉(zhuǎn)頁面
3.在頁面注冊(cè)對(duì)應(yīng)的事件
(1). 在data中定義一個(gè)初始值 scroll
(2). 在mouted中 ，mouted中的方法代表dom已經(jīng)加載完畢
window.addEventListener('scroll', this.handleScroll);
(3).methods 用于存放頁面函數(shù)
handleScroll () {this.scroll = document.documentElement &&document.documentElement.scrollTop
console.log(this.scroll)
}
4.activated 為keep-alive加載時(shí)調(diào)用
activated() {if(this.scroll > 0){
window.scrollTo(0, this.scroll);this.scroll = 0;
window.addEventListener('scroll', this.handleScroll);
}
}
5.deactivated 頁面退出時(shí)關(guān)閉事件 防止其他頁面出現(xiàn)問題
deactivated(){
window.removeEventListener('scroll', this.handleScroll);
}
方法二：利用beforeRouteLeave和watch
main.js中：
var store = newVuex.Store({ //記得先引入vuex
state: {
recruitScrollY:0},
getters: {
recruitScrollY: state=>state.recruitScrollY
},
mutations: {
changeRecruitScrollY(state, recruitScrollY) {
state.recruitScrollY=recruitScrollY;
}
},
actions: {
},
modules: {}
})
組件中(/flashSaleListX為當(dāng)前組件，即需要記住滾動(dòng)條位置的組件)：
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; //記錄離開頁面時(shí)的位置
if (position == null) position = 0
this.$store.commit('changeRecruitScrollY', position) //離開路由時(shí)把位置存起來
next()
}
方法三：(適用于方法二獲取不到滾動(dòng)位置)
組件中：
··· 內(nèi)容···
beforeRouteEnter(to, from, next) {
next(vm=>{
const div1=vm.$refs.div1//記錄滾動(dòng)高度
div1.scrollTop =vm.scroll
})
},
beforeRouteLeave(to, from, next) {
const div1= this.$refs.div1;this.scroll =div1.scrollTop; //data中記得定義變量scroll
next()
}
注：在路由配置中，記住滾動(dòng)的頁面keep-alive需為true
總結(jié)
以上是生活随笔為你收集整理的vue 记录滚动位置_vue 路由跳转记住滚动位置，返回时回到上次滚动位置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 获取input数据_使用 PHP Mas
- 下一篇： jstree如何禁止平级拖拽?_小程序为