以下に、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 サイトの他の関連記事を参照してください。