vueでページジャンプ後に元のページの初期位置に戻す方法

以下に、Vue のページジャンプ後に元のページの初期位置に戻る方法を紹介します。非常に参考になるので、皆さんの参考になれば幸いです。

vueページが新しいページにジャンプした後、新しいページから元のページに戻った後、元のページの最初の位置に戻りたい場合、この問題を解決するにはどうすればよいですか?まず、ページから飛び出したときに飛び出したscrollYを記録しておきます。元のページに戻るときは、戻り位置を記録したscrollyに設定するだけです。環境全体は 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: {} 
})

Three, こちらはリストビューページと詳細ページです。リストビューページは、詳細ページにジャンプし、その後、リストビューページにジャンプする前の位置に戻ります

。

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

IV 、作成したライフサイクルの実行を回避したい場合は、キャッシュキープアライブを使用できます。ここでも共有します。将来的にはすべての人に役立つことを願っています。 関連記事:

vueモバイルターミナルに日付選択コンポーネントを実装する

ノードを使用して組み込みデバッグを実装する

react webpackパッケージファイル(詳細なチュートリアル)

以上がvueでページジャンプ後に元のページの初期位置に戻す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。