Vue utilise l'historique pour enregistrer la méthode de données de l'introduction du code de la page précédente.

Cet article vous présente principalement l'introduction du code de la méthode d'utilisation de l'historique de Vue pour enregistrer les données de la page précédente. L'article la présente en détail à travers un exemple de code. Les amis qui en ont besoin peuvent s'y référer.

Avant-propos

Cet article présente principalement le contenu pertinent de Vue utilisant l'historique pour enregistrer les données de la page précédente. Une fois que Vue a utilisé l'historique, cela peut rendre l'URL plus belle, c'est-à-dire là. ne sera plus une question '#', je n'entrerai pas dans les détails ci-dessous. Jetons un coup d'œil à l'introduction détaillée

Exigences

Entrez la page de détails à partir de la deuxième page de. la page de liste. À votre retour, la page de liste est toujours affichée sur la deuxième page

Entrez la page de détails à partir de la deuxième page de la page de liste, et les conditions de filtrage de la page de liste existent toujours ; à votre retour.

Choix technique

Utilisez le composant vue-router pour stocker le numéro de page et les conditions de sélection en tant que paramètres dans this.$router.push({path: path, query: query}); , cette méthode est réalisable dans la conception d'interface utilisateur ci-dessus, mais lorsque la page de liste contient le composant onglet (le composant de pagination est public), cela posera des problèmes en raison du facteur push (car le push ouvrira une nouvelle page) ( PS : Cela peut aussi être dû à mes capacités techniques), cela n'a pas été mis en œuvre.
Utilisez l'API History (HTML5 commence à prendre en charge), utilisez la méthode history.replaceState pour stocker le numéro de page en tant que paramètre dans l'URL et stockez les conditions de sélection dans l'historique (il n'est pas clair où les données sont stockées ); utilisez location.hash Obtenez le numéro de page via la méthode history.state ; obtenez les conditions de sélection stockées via la méthode history.state.
Implémentation spécifique--Choix technique 2

Switch

Ajouter un commutateur (openroute) pour le composant de pagination, car il doit être en ligne en niveaux de gris. S'il y a un problème, le composant de pagination. La page à ajuster n’en est qu’une. Le code est le suivant :

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

Stocker le numéro de page et les conditions de sélection dans le composant de pagination & obtenir le numéro de page

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

Obtenir les conditions de sélection sur la page de liste

Cela peut être dû à la conception actuelle du framework. Problème, il n'y a aucun moyen de remplacer la variable initiale via Object.assign avant de demander des données, alors traitez-la d'abord comme ceci (méthode stupide, si vous avez une solution , veuillez me donner quelques conseils, merci) :

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

Résolu, les variables initiales n'ont pas besoin d'être déplacées et peuvent être obtenues des manières suivantes :

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

Enregistrez ici : je pensais que la méthode créée avait été exécutée après la surveillance du composant de pagination, mais plus tard, j'ai découvert que j'avais été induit en erreur (car auparavant, l'affectation des données était implémentée via Object.assign(true, this.form, history. état), mais sans succès). Faisons un petit résumé : "

Object.assign(true, a, b);" et "Object.assign(a, b);"

Conclusion : Le premier : changer a n'affecte pas b ; le second : changer a affecte l'analyse b

(cet article contient une analyse du code source (Veuillez répondre : Comment associer le code source dans WebStorm?), génial) :