vue页面跳转后返回原页面初始位置方法

vue页面跳转后返回原页面初始位置方法

vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly即可，scrolly我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的

一、main.js里面配置vuex

//引用vuex

import Vuex from 'vuex'

Vue.use(Vuex)

二、main.js里面vuex状态管理

var store = new Vuex.Store({

state: {

recruitScNUAGrLrollY:0

},

getters: {

recruitScrollY:state => state.recruitScrollY

},

mutations: {

changeRecruitScrollY(state,recruitScrollY) {

state.recruitScrollY = recruitScrollY

}

},

actions: {

},

modules: {}

})

三、这里列举一个listview页面和详情页面，listview页面就是原始页面，listview页面跳转到详情页面，然后返回时候回到跳转到详情页面之前的位置，在listview页面编写代码

beforeRouteLeave(to, from, next) {

let position = window.scrollY //记录离开页面的位置

if (position == null) position = 0

this.$store.commit('changeRecruitScrollY', position) //离开路由时把位置存起来

next()

},

watch: {

'$route' (to, from) {

if (to.name === 'NewRecruit') {//跳转的的页面的名称是"NewRecruit",这里就相当于我们listview页面，或者原始页面

let recruitScrollY = this.$store.state.recruitScrollY

window.scroll(0, recruitScrollY)

}

}

}

四、若要避免created生命周期的执行，可以使用缓存keepAlive,这里也分享一下

（1）App.vue template

<keep-alive v-if="$route.meta.keepAlive">

http://

（2）router index.js

Vue.use(Router)

const routerApp = new Router({

routes: [{

{

path: '/NewRecruit',

name: 'NewRecruit',

component: NewRecruit,

meta: {

keepAlive: true

}

},

{

path: '/NewRecruitDesc/:id',

name: 'NewRecruitDesc',

component: NewRecruitDesc,

meta: {

keepAlive: true

}

},

{

path: '/SubmitSucess',

name: 'SubmitSucess',

component: SubmitSucess,

meta: {

keepAlive: false

}

}

]

})

export default routerApp

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。