溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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
<keep-alive v-if="$route.meta.keepAlive"> <router-view></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
（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頁面跳轉后返回原頁面初始位置方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
