So kehren Sie nach einem Seitensprung in Vue zur Ausgangsposition der Originalseite zurück

Im Folgenden werde ich Ihnen eine Methode zur Rückkehr zur ursprünglichen Position der Originalseite nach einem Vue-Seitensprung vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Wie kann dieses Problem gelöst werden, nachdem die Vue-Seite zu einer neuen Seite gesprungen ist und dann von der neuen Seite zur Originalseite zurückgekehrt ist? Zunächst sollten wir den Scrolly aufzeichnen, der beim Verlassen der Seite herausgesprungen ist. Wenn wir zur ursprünglichen Seite zurückkehren, setzen wir einfach die Rückkehrposition auf den aufgezeichneten Scrolly. Ich verwende den Vuex-Statusmanager, um den Scrolly zu speichern. Die gesamte Umgebung basiert auf Vue-Cli

1. Vuex in main.js konfigurieren

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

2 . Vuex-Statusverwaltung 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: {} 
})

Drei, Hier ist eine Listenansichtsseite und eine Detailseite, listview Die Seite ist die Originalseite und springt dann zur Detailseite zurück. Schreiben Sie Code auf der Listview-Seite

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. Wenn Sie die Ausführung des erstellten Lebenszyklus vermeiden möchten, können Sie den Cache keepAlive verwenden, der auch hier geteilt wird

(1) App.vue-Vorlage

<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

Das Obige ist das, was ich für alle zusammengestellt habe alle in der Zukunft.

Verwandte Artikel:

Implementierung der Datumsauswahlkomponente im mobilen Vue-Terminal

Verwendung des Knotens zur Implementierung des integrierten Debugging

Webpack-gepackte Dateien reagieren (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo kehren Sie nach einem Seitensprung in Vue zur Ausgangsposition der Originalseite zurück. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!