After the vue page jumps to the new page and then returns from the new page to the original page, if you want to return to the original page's initial position, how to solve this problem? First of all, we should record the scrollY that pops up when the page jumps out. When returning to the original page, just set the return position to the scrolly recorded. I used the vuex state manager to save scrolly. The entire environment is built on vue-cli
1. Configure vuex in it
//Cite vueximport Vuex from 'vuex' (Vuex)
2. Vuex state management inside
var store = new ({
state: {
recruitScrollY:0
},
getters: {
recruitScrollY:state =>
},
mutations: {
changeRecruitScrollY(state,recruitScrollY) {
= recruitScrollY
}
},
actions: {
},
modules: {}
})
three、Here is a listview page and a details page. The listview 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 = //Record the location where you leave the page if (position == null) position = 0
this.$('changeRecruitScrollY', position) //Save the location when leaving the route next()
},
watch: {
'$route' (to, from) {
if ( === 'NewRecruit') {//The name of the page that is jumped is "NewRecruit", which is equivalent to our listview page, or the original page let recruitScrollY = this.$
(0, recruitScrollY)
}
}
}
4. To avoid the execution of the created life cycle, you can use the cache keepAlive. I will share it here.
（1） template
<keep-alive v-if="$"> <router-view></router-view> </keep-alive> <router-view v-if="!$"></router-view>
（2）router
(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 vue page is the method to return to the original page after redirecting to the original page. It is all the content I share with you. I hope you can give you a reference and I hope you can support me more.