背景モバイル デバイスでは、ページ ジャンプ間のキャッシュが必須要件です。 例: ホームページ => リストページ => 詳細ページ。 ホームページからリストページに入るときはリストページを更新する必要があり、詳細ページからリストページに戻るときはリストページがページキャッシュを保持する必要があります。 ホームページについては、通常はキャッシュされた状態で保存されます。 詳細ページはどの入口から入っても更新されます。 実装のアイデアページ キャッシュといえば、vue の keep-alive コンポーネントについて言及する必要があります。keep-alive はルーティング キャッシュ機能を提供します。この記事では主に、keep-alive と vuex を使用して、アプリケーションでページ ジャンプ キャッシュを実装します。 Vuex は、現在キャッシュする必要があるページを保存するために配列 cachePages を維持します。 具体的な実装Vuex実装コンテンツ // src/store/modules/app.js エクスポートデフォルト{ 州: { // ページキャッシュ配列 cachePages: [] }, 突然変異: // キャッシュページを追加 ADD_CACHE_PAGE(state, page) { if (!state.cachePages.includes(ページ)) { state.cachePages.push(ページ) } }, // キャッシュページを削除する REMOVE_CACHE_PAGE(state, page) { if (state.cachePages.includes(ページ)) { state.cachePages.splice(state.cachePages.indexOf(ページ), 1) } } } } // src/store/getters.js const ゲッター = { キャッシュページ: 状態 => state.app.cachePages } デフォルトのゲッターをエクスポートする // src/store/index.js 'vue' から Vue をインポートします 'vuex' から Vuex をインポートします Vue.use(Vuex) './modules/user' からユーザーをインポートします './modules/app' からアプリをインポートします './getters' からゲッターをインポートします // ストアオブジェクトをエクスポートする export default new Vuex.Store({ ゲッター、 モジュール: ユーザー、 アプリ } }) App.vueでは、keep-alive includeはcachePagesを設定します。 <keep-alive :include="cachePages"> <ルータービュー:key="$route.fullPath"></ルータービュー> </キープアライブ> 計算: { ...mapGetters([ 'キャッシュページ' ]) } ルーティング構成 { パス: '/home', 名前: 'ホーム'、 コンポーネント: () => import('@/views/tabbar/Home'), メタ: { タイトル: 'ホームページ'、 キープアライブ: 真 } }, { パス: '/list', 名前: 'リスト', コンポーネント: () => import('@/views/List'), メタ: { タイトル: 「リストページ」 必要なキャッシュページ: ['ListDetail'] } }, { パス: '/list-detail', 名前: 'ListDetail', コンポーネント: () => import('@/views/Detail'), メタ: { タイトル: 「詳細ページ」 } } ルートガード 'vue' から Vue をインポートします 'vue-router' から Router をインポートします。 '@/store' からストアをインポートします Vue.use(ルーター) // モジュール フォルダー内のすべてのルートをインポートします。const files = require.context('./modules', false, /\.js$/) モジュール = [] files.keys().forEach(キー => { モジュール = modules.concat(ファイル(キー).default) }) // ルーティング constroutes = [ { パス: '/'、 リダイレクト: '/home', }, ...モジュール ] const router = 新しいルーター({ モード: 'ハッシュ'、 ルート: ルート }) 関数 isKeepAlive(ルート) { ルートメタとルートメタのkeepAliveの場合{ store.commit('ADD_CACHE_PAGE', ルート名) } ルートの子の場合{ ルート.children.forEach(child => { isKeepAlive(子) }) } } ルート.forEach(item => { isKeepAlive(アイテム) }) // グローバルルーティングガード router.beforeEach((to, from, next) => { if (from.meta.needCachePages && from.meta.needCachePages.includes(to.name)) { store.commit('ADD_CACHE_PAGE', from.name) } そうでない場合 (from.meta.needCachePages) { store.commit('REMOVE_CACHE_PAGE', from.name) } // ページの最初のキャッシュ障害が発生します。vuex からキープアライブキャッシュへの遅延があると推測されます。 // ここでは、100 ミリ秒の遅延を使用して解決します setTimeout(() => { 次() }, 100) }) デフォルトルーターをエクスポートする ページスクロールバーの位置を復元するこのときページはキャッシュされますが、スクロールバーは毎回一番上に戻ります。 キャッシュされたページの場合、アクティブ化されたフックと非アクティブ化されたフックがトリガーされ、これら 2 つのフックを使用してスクロール バーの位置を復元できます。 ページを離れたとき、つまり非アクティブ化がトリガーされたときに、スクロール バーの位置が記録されます。 ページに戻ると、つまり activated がトリガーされると、スクロール バーの位置が復元されます。 // ミックスインを作成する // src/mixins/index.js エクスポートconst savePosition = (scrollId = 'app') => { 戻る { データ() { 戻る { マイスクロールトップ: 0 } }, アクティブ化() { 定数ターゲット = document.getElementById(スクロールId) ターゲット && target.scrollTop = this.myScrollTop }, beforeRouteLeave(to, from, next) { 定数ターゲット = document.getElementById(スクロールId) this.myScrollTop = target.scrollTop || 0 次() } } } ここで、deactivated を使用するとページがすぐに非表示になり、取得されたノードのスクロール バーの高さが 0 になることが判明したため、beforeRouteLeave が使用されます。 キャッシュが必要なページで使用してください <スクリプト> '@/mixins' から { savePosition } をインポートします。 エクスポートデフォルト{ ミックスイン: [新しい savePosition()] } </スクリプト> ページでスクロールコンテナをカスタマイズする場合は、スクロールコンテナIDを渡すことができます。 <テンプレート> <div id="スクロールコンテナ" スタイル="高さ: 100vh; オーバーフロー-y: スクロール;"> </div> </テンプレート> <スクリプト> '@/mixins' から { savePosition } をインポートします。 エクスポートデフォルト{ ミックスイン: [新しい savePosition('scroll-container')] } </スクリプト> 知らせ友人からよく「設定してもキャッシュ効果がないのはなぜですか?」と質問されます。 このとき、1 つの問題に注意する必要があります。keep-alive の鍵の 1 つは、ルート内の名前が .vue ファイル内の名前と一致している必要があることです。 キャッシュが有効にならない場合は、まず 2 つの名前と needCachePages が一致しているかどうかを確認してください。 考えと欠点この解決策は、私が 1 年以上前に行ったものです。今でも、ルートで needCachePages を毎回構成する必要があるなど、まだいくつかの欠点があると思います。 実際、モバイル デバイスでは、ミニ プログラムを開発するときと同じように、前のページに戻ると、前のページが常にキャッシュされます。navigateTo を呼び出して戻ると、ページは常にキャッシュされるため、手動で構成する必要はありません。 そこで、Vue でグローバル ジャンプ API を提供するというアイデアが生まれました。API が呼び出される限り、現在のページがキャッシュされます。更新操作が必要な場合は、ミニ プログラムで onShow のようにアクティブ化されたロジックを実行できます。 これで、Vue モバイル プロジェクトでページ キャッシュを実装する方法に関するこの記事は終了です。Vue ページ キャッシュに関するその他のコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CentOS 7にChromeブラウザをインストールする方法
>>: メモリ構成が過剰でMySQLが起動できない問題の解決方法
ドメイン名を使ってプロジェクトにアクセスする方法が気になったのですが、自分でドメイン名を取得するのは...
垂直方向では、行の配置を上、中央、下に設定できます。基本的な構文<TR VALIGN=&quo...
var numA = 0.1; var numB = 0.2; アラート(numA + numB)...
Web ページを作成するときに、特定のフォントを使用したい場合は、 @font-faceを介して参照...
目次序文1. リクエストをキャンセルする方法2. 重複リクエストの判定方法3. 繰り返しリクエストを...
導入: AD は Active Directory の略称で、中国語では Active Direct...
@Font-face 基本紹介: @font-face は、Web ページにカスタム フォントを表示...
MySQL 8 の新機能: MySQL をバージョン 5.x から 8.x に直接アップグレードする...
1. ドロップダウンリストの例コードは次のとおりです。 <!doctypehtml> ...
カリで再現まず、必要なvim.basicファイルにsuid権限を設定します。 chmod u+s /...
方法 1: hostnamectl の変更ステップ1 ホスト名を確認するホスト名ステップ2 ホスト名...
では、早速スクリーンショットを実行してみましょう。黒い駒はプレイヤーの位置、赤い駒はコンピュータの位...
背景最近、複数のプロジェクトを展開する際に、1 つのドメイン名で複数のプロジェクトにアクセスする方法...
目次序文ホットチェンジとはCocos Hot アップデートの概要マニフェストプロジェクトリソースとゲ...
今日、CSS の zoom 属性は何のために使用されるのかと尋ねられました。この属性は、フローティン...