在vue中如何實現頁面跳轉后返回原頁面初始位置

來源：懂視網責編：小OO 時間：2020-11-27 19:40:34

在vue中如何實現頁面跳轉后返回原頁面初始位置

vue頁面跳轉到新頁面之后，再由新頁面返回到原頁面時候若想返回調出原頁面的初始位置，怎么來解決這個問題呢？首先我們應該在跳出頁面時候記錄下跳出的scrollY，返回原頁面的時候在設置返回位置為記錄下的scrolly即可，scrolly我用的是vuex狀態管理器來保存的。整個環境是基于vue-cli搭建的。一、main.js里面配置vuex。//引用vuex import Vuex from '；vuex'；Vue.use(Vuex)。二、main.js里面vuex狀態管理。

推薦度：

點擊下載本文 文檔為doc格式

導讀vue頁面跳轉到新頁面之后，再由新頁面返回到原頁面時候若想返回調出原頁面的初始位置，怎么來解決這個問題呢？首先我們應該在跳出頁面時候記錄下跳出的scrollY，返回原頁面的時候在設置返回位置為記錄下的scrolly即可，scrolly我用的是vuex狀態管理器來保存的。整個環境是基于vue-cli搭建的。一、main.js里面配置vuex。//引用vuex import Vuex from '；vuex'；Vue.use(Vuex)。二、main.js里面vuex狀態管理。

下面我就為大家分享一篇vue頁面跳轉后返回原頁面初始位置方法，具有很好的參考價值，希望對大家有所幫助。

一、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移動端中實現日期選擇組件

使用node實現內置調試

react webpack打包后的文件（詳細教程）

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com