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

亚连
リリース: 2018-06-06 10:57:02
オリジナル
5137 人が閲覧しました

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!