Vue モバイル プロジェクトでページ キャッシュを実装する方法のサンプル コード

// 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({
 ゲッター、
 モジュール:
  ユーザー、
  アプリ
 }
})

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

デフォルトルーターをエクスポートする

// ミックスインを作成する
// 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
   次（）
  }
 }
}

<スクリプト>
'@/mixins' から { savePosition } をインポートします。

エクスポートデフォルト{
 ミックスイン: [新しい savePosition()]
}
</スクリプト>

<テンプレート>
  <div id="スクロールコンテナ" スタイル="高さ: 100vh; オーバーフロー-y: スクロール;">

  </div>
</テンプレート>

<スクリプト>
'@/mixins' から { savePosition } をインポートします。

エクスポートデフォルト{
 ミックスイン: [新しい savePosition('scroll-container')]
}
</スクリプト>