方法一： 利用Keep-Alive和监听器

1.首先在路由中引入需要的模块

{

path: ‘/scrollDemo’,

name: ‘scrollDemo’,

meta: {

keepAlive:true //需要缓存

},

component: resolve=> { require([‘../view/scrollDemo.vue’],

resolve) }

}

2.在App.vue中设置缓存组件

//缓存组件跳转的页面

//非缓存组件跳转页面

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 = newVuex.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()

}

方法三：(适用于方法二获取不到滚动位置)

组件中：

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