下面我就为大家分享一篇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: { recruitScrollY: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
登录后复制
（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
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在vue移动端中实现日期选择组件
在vue移动端中实现日期选择组件
在vue移动端中实现日期选择组件
以上就是在vue中如何实现页面跳转后返回原页面初始位置的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3188494.html
