vue从其它页面返回_vue 路由跳转记住滚动位置，返回时回到上次滚动位置

方法一： 利用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()

}