Vueキャッシュページ内容およびルーティングジャンプ前のページスクロール位置

開発中のビジネスシーンコンポーネントのデータはリフレッシュされないものもあります.私はこれらの一般的なデータを開発言語の定数にたとえています.一般的には変更もインタフェース要求もしません.ここでは、Vueでコンポーネントデータをどのようにキャッシュするか、ライフサイクルを記載しています.
まず、フロントエンドではSPAアプリケーション、シングルページアプリケーションを知っています.
エントリファイルがあり、VueのページテンプレートのエントリはAppです.vueファイル、このファイルは私たちの伝統的なレイアウトの最外層のDIVに相当します.

ここでは、業務ニーズに応じてKeepAliveのbol変数値を決定し、ジャンプ後のルーティングコンポーネントの内容をキャッシュするか否かを決定するが、includes配列の値はvuexのstore倉庫stateに最初に格納され、cacheArr空配列と命名され、業務ニーズに応じてstore倉庫に格納されたバッファ配列コンポーネント変数cacheArrを動的に変更し、keepaliveを使用するコンポーネントでwatchを使用してルーティングの変更を傍受する.をクリックしてincludes変数をリアルタイムで変更すると、キャッシュコンポーネントのデータを動的にキャッシュおよび削除できます.
ここでは、より詳細なアプリケーションのブログアドレスを転載します.
https://blog.csdn.net/Liu_yunzhao/article/details/102821321
https://blog.csdn.net/qq_35728290/article/details/83006577
https://segmentfault.com/a/1190000018705351
では、ページルーティングのジャンプ前のスクロール位置をどのようにキャッシュしますか?
ここでvue-routerの構成ルーティングファイルにはhashモード(デフォルトモード)とhistoryモードの2つのモードがあります.
デフォルトモードで起動するサービスアドレスバーは、次のとおりです.

http://localhost:8080/#/

アドレスバーに#が付いているのが見えますが、表示しない場合はルーティングファイルの構成項目mode属性値を変更します.

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Main
    }
  ]
})

Vueのhistoryモードの原理はH 5のhistoryに基づいているので、ページのスクロール位置を記録し、対応する構成項目を提供し、routes配列の後ろにscrollBehavior関数を加えることができます.

scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      /*                 */
      const position = {}
      //      ，       
      if (to.hash) {
        position.selector = to.hash;
      }
      //   meta   scrolltop     true，           
      if (to.matched.some(m => m.meta.scrollToTop)) {
        position.x = 0;
        position.y = 0;
      }
      //          ，                    
      if (from.meta.KeepAlive) {
        from.meta.savedPosition = document.body.scrollTop;
      }
      return position;
    }
  }