vue页⾯跳转后返回原页⾯初始位置⽅法
vue页⾯跳转到新页⾯之后，再由新页⾯返回到原页⾯时候若想返回调出原页⾯的初始位置，怎么来解决这个问题呢？⾸先我们应该在跳出页⾯时候记录下跳出的scrollY，返回原页⾯的时候在设置返回位置为记录下的scrolly即可，scrolly我⽤的是vuex 状态管理器来保存的。整个环境是基于vue-cli搭建的
⼀、main.js⾥⾯配置vuex
//引⽤vuex
import Vuex from 'vuex'
Vue.u(Vuex)
⼆、main.js⾥⾯vuex状态管理
var store = new Vuex.Store({
state: {
recruitScrollY:0
},
getters: {
recruitScrollY:state => uitScrollY
},
mutations: {
changeRecruitScrollY(state,recruitScrollY) {
程晓玥郑恺
}
},
actions: {
},
modules: {}
})
普通高等学校招生全国统一考试三、这⾥列举⼀个listview页⾯和详情页⾯，listview页⾯就是原始页⾯，listview页⾯跳转到详情页⾯，然后返回时候回到跳转到详情页⾯之前的位置，在listview页⾯编写代码
beforeRouteLeave(to, from, next) {
let position = window.scrollY //记录离开页⾯的位置
if (position == null) position = 0
this.$it('changeRecruitScrollY', position) //离开路由时把位置存起来蒙古族奶茶
next()
},
watch: {饥荒火鸡
'$route' (to, from) {
if (to.name === 'NewRecruit') {//跳转的的页⾯的名称是"NewRecruit"，这⾥就相当于我们listview页⾯，或者原始页⾯
let recruitScrollY = this.$uitScrollY咖啡会发胖吗
单引号的用法
window.scroll(0, recruitScrollY)
}
}医科大学全国排名
}
四、若要避免created⽣命周期的执⾏，可以使⽤缓存keepAlive，这⾥也分享⼀下
（1）App.vue template
<keep-alive v-if="$a.keepAlive">
形容森林<router-view></router-view>
</keep-alive>
<router-view v-if="!$a.keepAlive"></router-view>
（2）router index.js
Vue.u(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: fal
}
}
]
})
export default routerApp
以上这篇vue页⾯跳转后返回原页⾯初始位置⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
