How to return to the initial position of the original page after page jump in vue

Below I will share with you a method of returning to the initial position of the original page after a vue page jump. It has a good reference value and I hope it will be helpful to everyone.

After the vue page jumps to a new page, and then returns from the new page to the original page, if you want to return to the initial position of the original page, how to solve this problem? First of all, we should record the scrollY that jumped out when jumping out of the page. When returning to the original page, just set the return position to the recorded scrolly. I use the vuex state manager to save the scrolly. The entire environment is built based on vue-cli

1. Configure vuex in main.js

//引用vuex 
import Vuex from 'vuex' 
Vue.use(Vuex)

2. vuex status management in main.js

var store = new Vuex.Store({ 
 state: { 
 recruitScrollY:0 
 }, 
 getters: { 
 recruitScrollY:state => state.recruitScrollY 
 }, 
 mutations: { 
 changeRecruitScrollY(state,recruitScrollY) { 
 state.recruitScrollY = recruitScrollY 
 } 
 }, 
 actions: { 
 
 }, 
 modules: {} 
})

三、Here is a listview page and details page, listview The page is the original page. The listview page jumps to the details page, and then returns to the position before jumping to the details page. Write code on the listview page

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) 
 } 
 } 
 }

4. If you want to avoid the execution of the created life cycle, you can use cache keepAlive. I will also share it here.

(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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Implement date selection component in vue mobile terminal

Use node to implement built-in debugging

react webpack packaged files (detailed tutorial)

The above is the detailed content of How to return to the initial position of the original page after page jump in vue. For more information, please follow other related articles on the PHP Chinese website!