vue頁面跳轉(zhuǎn)到新頁面之后，再由新頁面返回到原頁面時(shí)候若想返回調(diào)出原頁面的初始位置，怎么來解決這個(gè)問題呢？首先我們應(yīng)該在跳出頁面時(shí)候記錄下跳出的scrollY，返回原頁面的時(shí)候在設(shè)置返回位置為記錄下的scrolly即可，scrolly我用的是vuex狀態(tài)管理器來保存的。整個(gè)環(huán)境是基于vue-cli搭建的
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括仁和網(wǎng)站建設(shè)、仁和網(wǎng)站制作、仁和網(wǎng)頁制作以及仁和網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，仁和網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到仁和省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
一、main.js里面配置vuex
//引用vuex import Vuex from 'vuex' Vue.use(Vuex)
二、main.js里面vuex狀態(tài)管理
重慶分公司
重慶分公司
var store = new Vuex.Store({
state: {
recruitScrollY:0
},
getters: {
recruitScrollY:state => state.recruitScrollY
},
mutations: {
changeRecruitScrollY(state,recruitScrollY) {
state.recruitScrollY = recruitScrollY
}
},
actions: {
},
modules: {}
}) 三、這里列舉一個(gè)listview頁面和詳情頁面，listview頁面就是原始頁面，listview頁面跳轉(zhuǎn)到詳情頁面，然后返回時(shí)候回到跳轉(zhuǎn)到詳情頁面之前的位置，在listview頁面編寫代碼
beforeRouteLeave(to, from, next) {
let position = window.scrollY //記錄離開頁面的位置
if (position == null) position = 0
this.$store.commit('changeRecruitScrollY', position) //離開路由時(shí)把位置存起來
next()
},
watch: {
'$route' (to, from) {
if (to.name === 'NewRecruit') {//跳轉(zhuǎn)的的頁面的名稱是"NewRecruit",這里就相當(dāng)于我們listview頁面，或者原始頁面
let recruitScrollY = this.$store.state.recruitScrollY
window.scroll(0, recruitScrollY)
}
}
} 四、若要避免created生命周期的執(zhí)行，可以使用緩存keepAlive,這里也分享一下
（1）App.vue template
（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頁面跳轉(zhuǎn)后返回原頁面初始位置方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。
