Vue は、履歴を使用して、前のページのコードの紹介のデータ メソッドを記録します。

この記事では、Vue の History を使って前ページのデータを記録する方法のコード紹介を中心に、サンプルコードを通して詳しく紹介していますので、必要な方は参考にしてください。

はじめに

この記事では、履歴を使用して前のページのデータを記録した後、URL をより美しくすることができる Vue の関連コンテンツを主に紹介します。は「#」質問ではなくなります。以下では詳細は説明しません。詳細な紹介を見てみましょう

要件

の 2 ページ目から詳細ページに入ります。ページ;

リストページの 2 ページ目から詳細ページに入ると、リストページの絞り込み条件が残っています。いつ戻るの。

技術的選択

vue-router コンポーネントを使用して、ページ番号と選択条件をパラメータとして this.$router.push({path: path, query: query}); に保存します。 、この方法は上記の 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>`

リストページの選択条件を取得します

Itフレームワークの設計の問題が原因である可能性がありますが、方法はありません データをリクエストする前に、Object.assign メソッドで初期変数を置き換えるので、最初にこのように処理してください（愚かな方法です。解決策がある場合は、私を指導してください、ありがとう):

`<script>`
`export` `default` `{`
`data()
 {`eturn`
`{`
`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>`

は解決されました。初期変数を移動する必要はありません。次の方法で実現できます:

`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

分析が行われます (この記事にはソース コード分析が含まれています (回答してください: ソース コードを関連付ける方法) WebStorm では?

FAQ

history.replaceState メソッドを使用する必要があります。理由: 変更された URL は履歴スタックにプッシュされないため、ロールバックと前方操作のステップ数は増加しません。
history.replaceState メソッドを使用すると、保存可能な状態サイズを操作できません 640k

以上がVue は、履歴を使用して、前のページのコードの紹介のデータ メソッドを記録します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。