vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly即可，scrolly我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的
一、main.js里面配置vuex
rush:xhtml;">
//引用vuex
import Vuex from 'vuex'
Vue.use(Vuex)
二、main.js里面vuex状态管理
state.recruitScrollY
},mutations: {
changeRecruitScrollY(state,recruitScrollY) {
state.recruitScrollY = recruitScrollY
}
},actions: {
},modules: {}
})
三
、
这里列举一个listview页面和详情页面，listview页面就是原始页面，listview页面跳转到详情页面，然后返回时候回到跳转到详情页面之前的位置，在listview页面编写代码
rush:xhtml;">
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
rush:xhtml;">
Meta.keepAlive">
Meta.keepAlive">
（2）router index.js
rush:xhtml;">
Vue.use(Router)
const routerapp = new Router({
routes: [{
{
path: '/NewRecruit',name: 'NewRecruit',component: NewRecruit,Meta: {
keepAlive: true
}
},{
path: '/NewRecruitDesc/:id',name: 'NewRecruitDesc',component: NewRecruitDesc,{
path: '/SubmitSucess',name: 'SubmitSucess',component: SubmitSucess,Meta: {
keepAlive: false
}
}
]
})
export default routerapp
以上这篇vue页面跳转后返回原页面初始位置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文地址：https://www.jb51.cc/vue/33716.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
