微客导航 » 文章资讯 » vue页面跳转后返回原页面初始位置方法

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

2023-09-16 11:45:06 202

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

一、main.js里面配置vuex

//引用vuex
importVuexfrom'vuex'
Vue.use(Vuex)

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

varstore=newVuex.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){
letposition=window.scrollY//记录离开页面的位置
if(position==null)position=0
this.$store.commit('changeRecruitScrollY',position)//离开路由时把位置存起来
next()
},
watch:{
'$route'(to,from){
if(to.name==='NewRecruit'){//跳转的的页面的名称是"NewRecruit",这里就相当于我们listview页面，或者原始页面
letrecruitScrollY=this.$store.state.recruitScrollY
window.scroll(0,recruitScrollY)
}
}
}

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

（1）App.vuetemplate

（2）routerindex.js

Vue.use(Router)

constrouterApp=newRouter({
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
}
}
]
})

exportdefaultrouterApp

以上这篇vue页面跳转后返回原页面初始位置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐