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

前端之家收集整理的这篇文章主要介绍了vue页面跳转后返回原页面初始位置方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

一、main.js里面配置vuex

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

state.recruitScrollY },mutations: { changeRecruitScrollY(state,recruitScrollY) { state.recruitScrollY = recruitScrollY } },actions: {

},modules: {}
})

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

页面的位置 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

Meta.keepAlive"> Meta.keepAlive">

(2)router index.js

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.f2er.com/vue/33716.html

猜你在找的Vue相关文章