UI

リストページ

詳細ページ

需要

リストページの2ページ目から詳細ページを入力します。リストページは、戻るときに2ページ目に表示されたままです。
リストページの2ページ目から詳細ページまで、戻るときにリストページのフィルター条件がまだ存在します。

<！-詳細->

技術オプション

vue-routerコンポーネントを使用しthis.$router.push({path: path, query: query});、页码合計选择条件をパラメーターとしてURL に格納することにより、このメソッドは上記のUIデザインで実現可能ですが、リストページにタブコンポーネントが含まれている場合（ページングコンポーネントはパブリック）、プッシュ要因によるものです。（プッシュすると新しいページが開くため）いくつかの問題が発生しました（PS：私の技術的能力の理由でもある可能性があります）。
使用History APIすることにより、（HTML5をサポートし始めた）history.replaceStateの方法页码、するURLのパラメータとして格納选择条件することにより、履歴に格納されている（データは特に、格納場所クリアしない）location.hash取得モード页码;によってhistory.state選択条件記憶モードを取得します。

特定の実装技術の選択2

スイッチ

灰色の線はオンラインである必要があるため、ページングコンポーネント用のスイッチ（openroute）を追加します。問題が発生した場合、調整するページは1つだけです。コードは次のとおりです。

<script>
  export default {
    props: {
      openroute: {
        type: Boolean,
        default: () => (true)
      }
    },
  }
</script>

ページングコンポーネントでの保存`页码`と`选择条件`取得`页码`

<script>
  export default {
    methods: {
      fetchData(page) {
          //请求参数
        let params = this.params;
        //请求页码
        let newPage;
        //openroute处理
        if (this.openroute) {
          //为url添上#page
          if (page) {
            history.replaceState(params.data, document.title, "#" + page);
          } else {
            if (history.state) {
              if (!history.state.key && location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
                if (JSON.stringify(history.state) !== JSON.stringify(params.data)) { //选择条件变更则请求第一页
                  history.replaceState(params.data, document.title, "#1");
                } else {
                  history.replaceState(params.data, document.title, "#" + location.hash.split("#")[1]);
                }
              } else {
                history.replaceState(params.data, document.title, "#1");
              }
            } else {
              if (location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
                history.replaceState(params.data, document.title, "#" + location.hash.split("#")[1]);
              } else {
                history.replaceState(params.data, document.title, "#1");
              }
            }
          }
          //获取url后面的#page
          if (location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
            newPage = Number(location.hash.split("#")[1]);
          } else {
            newPage = 1;
          }
        } else {
          newPage = page;
        }
        //请求数据，获得结果，传递给列表页面
      }
    }
  }
</script>

リストページ取得`选择条件`

現在、フレームワークの設計の問題が原因である可能性があり、データObject.assignを要求することによって初期変数を置き換えることができないので、最初にそれを処理します（愚かな方法、皆さんはトラブルガイダンスの解決策を持っています、ありがとう）：

<script>
  export default {
    data() {
      return {
        form: {
          aaa: (history.state && history.state.aaa) ? history.state.aaa : null,
          bbb: (history.state && history.state.bbb) ? history.state.bbb : null,
          ccc: (history.state && history.state.ccc) ? history.state.ccc : null
        },
      };
    }
  };
</script>

解決された、初期の変数は移動する必要はありません、以下の方法で達成することができます。

created(){
  //获取缓存的数据
  if (history.state) {
    Object.assign(this.form, history.state)
    if (this.form.key) {
      delete this.form.key
    }
  }
},

ここに記録があります：作成されたメソッドはページングコンポーネントのウォッチモニタリングの後で実行されたと思いましたが、後で誤解を招くことがわかりました（Object.assign(true, this.form, history.state)データの割り当ては過去の方法で行われたため、成功しませんでした）。ここに小さな要約があります：

Object.assign（true、a、b）; "と" Object.assign（a、b）; "の違いは何ですか？

結論：前者：aを変更してもbには影響しません;後者：aを変更してもbに影響します

分析（この記事にはソースコード分析があります（<font color = 'red'>回答：WebStormでソースコードを関連付ける方法</ Font>）、素晴らしい）：https：//www.cnblogs.com/libin ...

よくある質問

これを使用history.replaceStateする方法は、変更されたURLを履歴スタックにプッシュしないため、戻る操作と転送操作のステップ数が増加しないためです。
使用history.replaceStateモード、保存可能な状態のサイズは640kを操作できません。
ブラウザの互換性の問題がある可能性があり、ここで確認してください：HTTPS：//caniuse.com/#feat=his ...。

デモまたはソース

これは会社のプロジェクトであるため、現在デモやソースコードはありません

参考記事

ブラウザの履歴を操作する

この記事の複製：Ape 2048 Vueは履歴を使用して前のページのデータを記録します

Vueは履歴を使用して前のページのデータを記録します

UI

需要