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 = 0this.$store.commit('changeRecruitScrollY', position) //離開路由時把位置存起來next()},watch: {'$route' (to, from) {if (to.name === 'NewRecruit') {//跳轉的的頁面的名稱是"NewRecruit",這里就相當于我們listview頁面，或者原始頁面let recruitScrollY = this.$store.state.recruitScrollYwindow.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页面跳转后返回原页面初始位置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。