Vue verwendet den Verlauf, um die Datenmethode der Codeeinführung auf der vorherigen Seite aufzuzeichnen

Dieser Artikel führt Sie hauptsächlich in die Code-Einführung der Vue-Methode zur Verwendung des Verlaufs zum Aufzeichnen der Daten der vorherigen Seite ein. Freunde, die ihn benötigen, können darauf verweisen.

Vorwort

In diesem Artikel wird hauptsächlich der relevante Inhalt von Vue vorgestellt, der den Verlauf verwendet, um die Daten der vorherigen Seite aufzuzeichnen. Nachdem Vue den Verlauf verwendet hat, kann er die URL dort schöner machen wird keine „#“-Frage mehr sein, ich werde unten nicht auf Details eingehen. Schauen wir uns die detaillierten Anforderungen an. Geben Sie die Detailseite ab der zweiten Seite ein Wenn Sie zurückkehren, wird die Listenseite weiterhin auf der zweiten Seite der Listenseite angezeigt. Die Filterbedingungen der Listenseite sind weiterhin vorhanden wenn du zurückkommst.

Technische Wahl

Verwenden Sie die Vue-Router-Komponente, um die Seitennummer und Auswahlbedingungen als Parameter in this.$router.push({path: path, query: query}); zu speichern , diese Methode ist im obigen UI-Design machbar, aber wenn die Listenseite die Tab-Komponente enthält (die Paging-Komponente ist öffentlich), verursacht sie aufgrund des Push-Faktors einige Probleme (da Push eine neue Seite öffnet) ( PS: Es kann auch an meinen technischen Fähigkeiten liegen), es wurde nicht umgesetzt.

Verwenden Sie die Verlaufs-API (HTML5 beginnt mit der Unterstützung), speichern Sie über die Methode „history.replaceState“ die Seitenzahl als Parameter in der URL und speichern Sie die Auswahlbedingung im Verlauf (es ist nicht klar, wo die Daten gespeichert sind). ); über location.hash Rufen Sie die Seitennummer über die Methode „history.state“ ab; rufen Sie die gespeicherten Auswahlbedingungen über die Methode „history.state“ ab.

Spezifische Implementierung – Technische Wahl 2

Schalter

Fügen Sie einen Schalter (Openroute) für die Paging-Komponente hinzu, da diese in Graustufen online sein muss Es gibt nur eine Seite, die angepasst werden muss. Der Code lautet wie folgt:

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

Speichern Sie die Seitenzahl und die Auswahlbedingungen in der Paging-Komponente und rufen Sie die Seitenzahl ab

`<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>`

Rufen Sie die Auswahlbedingungen auf der Listenseite ab

Derzeit kann es an einem Problem mit dem Framework-Design liegen. Es gibt keine Möglichkeit, vor dem Anfordern von Daten die Anfangsvariablen mit der Object.assign-Methode zu ersetzen. Gehen Sie also zuerst so vor (dumme Methode, wenn Sie eine Lösung haben). , bitte leite mich, danke):

`<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>`

wurde gelöst, die Anfangsvariablen müssen nicht verschoben werden, kann auf folgende Weise erreicht werden:

`if` `(history.state) {`
`Object.assign(``this``.form, history.state)`
`if` `(``this``.form.key) {`
`delete` `this``.form.key`
`}`
`}`
`},`

Hier aufgezeichnet: Ich dachte dass die erstellte Methode nach der Überwachung der Paging-Komponente ausgeführt wurde, aber später stellte ich fest, dass ich in die Irre geführt wurde (weil dies zuvor über Object.assign(true, this .form, History.state) durchgeführt wurde, um die Datenzuweisung zu erreichen, aber es war nicht erfolgreich). Machen wir eine kleine Zusammenfassung: „

Object.assign(true, a, b);“ und „Object.assign(a, b);“

Fazit: Ersteres: Das Ändern von a wirkt sich nicht auf b aus. Letzteres: Das Ändern von a wirkt sich auf die Analyse von b aus (dieser Artikel enthält eine Quellcode-Analyse (Bitte antworten Sie: So verknüpfen Sie Quellcode in WebStorm?), großartig):

FAQ

Sie müssen die Methode „history.replaceState“ verwenden, weil: die geänderte URL nicht in den Verlaufsstapel verschoben wird Dadurch wird der Rollback und die Anzahl der Vorwärtsoperationsschritte nicht erhöht.

Mit der Methode „history.replaceState“ kann die speicherbare Statusgröße nicht 640 KB betragen.

Das obige ist der detaillierte Inhalt vonVue verwendet den Verlauf, um die Datenmethode der Codeeinführung auf der vorherigen Seite aufzuzeichnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!