vue頁(yè)面跳轉(zhuǎn)后返回原頁(yè)面初始位置方法
vue頁(yè)面跳轉(zhuǎn)到新頁(yè)面之后,再由新頁(yè)面返回到原頁(yè)面時(shí)候若想返回調(diào)出原頁(yè)面的初始位置,怎么來(lái)解決這個(gè)問(wèn)題呢?首先我們應(yīng)該在跳出頁(yè)面時(shí)候記錄下跳出的scrollY,返回原頁(yè)面的時(shí)候在設(shè)置返回位置為記錄下的scrolly即可,scrolly我用的是vuex狀態(tài)管理器來(lá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頁(yè)面和詳情頁(yè)面,listview頁(yè)面就是原始頁(yè)面,listview頁(yè)面跳轉(zhuǎn)到詳情頁(yè)面,然后返回時(shí)候回到跳轉(zhuǎn)到詳情頁(yè)面之前的位置,在listview頁(yè)面編寫代碼
beforeRouteLeave(to, from, next) {
let position = window.scrollY //記錄離開頁(yè)面的位置
if (position == null) position = 0
this.$store.commit('changeRecruitScrollY', position) //離開路由時(shí)把位置存起來(lái)
next()
},
watch: {
'$route' (to, from) {
if (to.name === 'NewRecruit') {//跳轉(zhuǎn)的的頁(yè)面的名稱是"NewRecruit",這里就相當(dāng)于我們listview頁(yè)面,或者原始頁(yè)面
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頁(yè)面跳轉(zhuǎn)后返回原頁(yè)面初始位置方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue跳轉(zhuǎn)頁(yè)面的幾種方法(推薦)
- Vue.js實(shí)戰(zhàn)之利用vue-router實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)面
- vue-router跳轉(zhuǎn)時(shí)打開新頁(yè)面的兩種方法
- vue實(shí)現(xiàn)未登錄跳轉(zhuǎn)到登錄頁(yè)面的方法
- vue從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面并攜帶參數(shù)的解決方法
- vue-router跳轉(zhuǎn)頁(yè)面的方法
- vue實(shí)現(xiàn)登錄后頁(yè)面跳轉(zhuǎn)到之前頁(yè)面
- vue路由攔截及頁(yè)面跳轉(zhuǎn)的設(shè)置方法
- Vue頁(yè)面跳轉(zhuǎn)動(dòng)畫效果的實(shí)現(xiàn)方法
- Vue實(shí)現(xiàn)登陸跳轉(zhuǎn)
相關(guān)文章
Vue裝飾器中的vue-property-decorator?和?vux-class使用詳解
這篇文章主要介紹了Vue裝飾器中的vue-property-decorator?和?vux-class使用詳解,通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)vue-property-decorator?和?vux-class的使用感興趣的朋友一起看看吧2022-08-08
基于uniapp+vue3自定義增強(qiáng)版table表格組件「兼容H5+小程序+App端」
uv3-table:一款基于uniapp+vue3跨端自定義手機(jī)端增強(qiáng)版表格組件,支持固定表頭/列、邊框、斑馬紋、單選/多選,自定義表頭/表體插槽、左右固定列陰影高亮顯示,支持編譯兼容H5+小程序端+App端,H5+小程序+App端,多端運(yùn)行一致2024-05-05
vue進(jìn)入頁(yè)面時(shí)不在頂部,檢測(cè)滾動(dòng)返回頂部按鈕問(wèn)題及解決方法
這篇文章主要介紹了vue進(jìn)入頁(yè)面時(shí)不在頂部,檢測(cè)滾動(dòng)返回頂部按鈕問(wèn)題及解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
vue項(xiàng)目或網(wǎng)頁(yè)上實(shí)現(xiàn)文字轉(zhuǎn)換成語(yǔ)音播放功能
這篇文章主要介紹了在vue項(xiàng)目或網(wǎng)頁(yè)上實(shí)現(xiàn)文字轉(zhuǎn)換成語(yǔ)音,需要的朋友可以參考下2020-06-06
解決element ui el-row el-col里面高度不一致問(wèn)題
這篇文章主要介紹了解決element ui el-row el-col里面高度不一致問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue登錄頁(yè)面回車執(zhí)行事件@keyup.enter.native問(wèn)題
這篇文章主要介紹了vue登錄頁(yè)面回車執(zhí)行事件@keyup.enter.native問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03
vue項(xiàng)目中怎樣嵌入其它項(xiàng)目的頁(yè)面
這篇文章主要介紹了vue項(xiàng)目中怎樣嵌入其它項(xiàng)目的頁(yè)面問(wèn)題,具有很好 的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vant picker+popup 自定義三級(jí)聯(lián)動(dòng)案例
這篇文章主要介紹了vant picker+popup 自定義三級(jí)聯(lián)動(dòng)案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11

