vue頁面跳轉(zhuǎn)后返回原頁面初始位置方法
vue頁面跳轉(zhuǎn)到新頁面之后,再由新頁面返回到原頁面時(shí)候若想返回調(diào)出原頁面的初始位置,怎么來解決這個(gè)問題呢?首先我們應(yīng)該在跳出頁面時(shí)候記錄下跳出的scrollY,返回原頁面的時(shí)候在設(shè)置返回位置為記錄下的scrolly即可,scrolly我用的是vuex狀態(tài)管理器來保存的。整個(gè)環(huán)境是基于vue-cli搭建的
一、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
<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頁面跳轉(zhuǎn)后返回原頁面初始位置方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue跳轉(zhuǎn)頁面的幾種方法(推薦)
- Vue.js實(shí)戰(zhàn)之利用vue-router實(shí)現(xiàn)跳轉(zhuǎn)頁面
- vue-router跳轉(zhuǎn)時(shí)打開新頁面的兩種方法
- vue實(shí)現(xiàn)未登錄跳轉(zhuǎn)到登錄頁面的方法
- vue從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面并攜帶參數(shù)的解決方法
- vue-router跳轉(zhuǎn)頁面的方法
- vue實(shí)現(xiàn)登錄后頁面跳轉(zhuǎn)到之前頁面
- vue路由攔截及頁面跳轉(zhuǎn)的設(shè)置方法
- Vue頁面跳轉(zhuǎn)動(dòng)畫效果的實(shí)現(xiàn)方法
- Vue實(shí)現(xiàn)登陸跳轉(zhuǎn)
相關(guān)文章
Vue對(duì)Element中的el-tag添加@click事件無效的解決
本文主要介紹了Vue對(duì)Element中的el-tag添加@click事件無效的解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05vue如何實(shí)現(xiàn)對(duì)請(qǐng)求參數(shù)進(jìn)行簽名
這篇文章主要介紹了vue如何實(shí)現(xiàn)對(duì)請(qǐng)求參數(shù)進(jìn)行簽名問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01vue3配置router路由并實(shí)現(xiàn)頁面跳轉(zhuǎn)功能
這篇文章主要介紹了vue3配置router路由并實(shí)現(xiàn)頁面跳轉(zhuǎn),本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04vue實(shí)現(xiàn)折線圖 可按時(shí)間查詢
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)折線圖,可按時(shí)間查詢,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08Vscode關(guān)閉Eslint語法檢查的多種方式(保證有效)
eslint是一個(gè)JavaScript的校驗(yàn)插件,通常用來校驗(yàn)語法或代碼的書寫風(fēng)格,下面這篇文章主要給大家介紹了關(guān)于Vscode關(guān)閉Eslint語法檢查的多種方式,文章通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07