vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrollY即可,scrollY我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的
//引用vuex
从“Vuex”进口Vuex
Vue.use (Vuex)
var=new Vuex.Store存储({
状态:{
recruitScrollY: 0
},
getter: {
recruitScrollY:状态=比;state.recruitScrollY
},
突变:{
changeRecruitScrollY(状态,recruitScrollY) {
状态。recruitScrollY=recruitScrollY
}
},
行动:{
},
模块:{}
})
beforeRouteLeave(下),从{
让位置=窗口。scrollY//记录离开页面的位置
如果位置==null)位置=0
美元。store.commit (changeRecruitScrollY,位置)//离开路由时把位置存起来
next ()
},
看:{
“美元路线”(从){
如果(to.name===NewRecruit){//跳转的的页面的名称是“NewRecruit”,这里就相当于我们listview页面,或者原始页面
让recruitScrollY=store.state.recruitScrollY美元
窗口。recruitScrollY滚动(0)
}
}
}
<强>(1)应用程序。vue模板
& lt;维生v=" $ route.meta.keepAlive "比;
& lt; router-view> & lt;/router-view>
& lt;/keep-alive>
& lt; router-view v=" ! route.meta.keepAlive美元”祝辞& lt;/router-view>之前
<强>(2)路由器index.js
Vue.use(路由器)
const routerApp=new路由器({
路线:[{
{
路径:/NewRecruit,
名称:“NewRecruit”,
组件:NewRecruit,
元:{
keepAlive:真
}
},
{
路径:/NewRecruitDesc: id,
名称:“NewRecruitDesc”,
组件:NewRecruitDesc,
元:{
keepAlive:真
}
},
{
路径:/SubmitSucess,
名称:“SubmitSucess”,
组件:SubmitSucess,
元:{
keepAlive:假
}
}
]
}）
出口默认routerApp
以上这篇vue页面跳转后返回原页面初始位置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
