Comment accéder à la page et conserver les données du formulaire en vue

Vue est un framework JavaScript moderne et facilement extensible qui permet aux développeurs de créer facilement des applications à page unique (SPA). Une fonctionnalité importante du framework Vue est la possibilité de mettre à jour dynamiquement le contenu de la page sans actualiser la page entière, ce qui peut améliorer la vitesse de réponse des applications et l'expérience utilisateur. Cependant, pendant le processus de développement, il est relativement difficile de résoudre les problèmes de transfert de données. Cet article explique comment conserver les données du formulaire après que Vue ait accédé à la page.

Stockage de données côté client

Dans Vue, nous utilisons généralement le stockage de données côté client (Client Side Data Storage) pour résoudre les problèmes de transfert de données. Vous pouvez stocker des données en mémoire, dans des cookies, dans le cache du navigateur (localStorage et sessionStorage) ou à l'aide d'une base de données. Pour les besoins de cet article, nous nous concentrerons principalement sur la mise en cache du navigateur. Grâce au cache du navigateur, les données du client peuvent être enregistrées dans le navigateur du client et lorsque l'utilisateur visite le même site, les données peuvent être automatiquement restaurées à partir du cache du navigateur.

Vue-router

Dans les projets Vue, Vue-router est généralement utilisé pour gérer le routage afin de réaliser des sauts entre les pages. Vue-router est le gestionnaire de routage officiellement fourni par Vue, qui peut nous aider à créer rapidement des applications Web d'une seule page.

Fonction pré-hook de Vue-router

La fonction pré-hook de Vue-router est une fonction qui est exécutée avant le saut d'itinéraire. Vue-router fournit une variété de fonctions de pré-hook. Ici, nous utilisons la fonction beforeRouteLeave pour effectuer certaines opérations avant de quitter l'itinéraire actuel, comme la sauvegarde des données du formulaire.

Utilisez la fonction beforeRouteLeave pour enregistrer les données du formulaire

Nous pouvons enregistrer les données du formulaire dans la fonction beforeRouteLeave et stocker les données dans sessionStorage après avoir quitté la page actuelle. La prochaine fois que l'utilisateur visitera la page, nous pourrons restaurer les données directement depuis sessionStorage.

Voici un exemple :

beforeRouteLeave (to, from, next) {
  // 保存表单数据
  sessionStorage.setItem('form_data', JSON.stringify(this.form));
  next();
}

Restaurer les données du formulaire à l'aide de la fonction hook créée

Nous pouvons restaurer les données du formulaire dans la fonction hook créée pour charger les données de sessionStorage dans l'application.

Ce qui suit est un exemple :

created () {
  // 从 sessionStorage 中恢复表单数据
  const formDataString = sessionStorage.getItem('form_data');
  if (formDataString) {
    this.form = JSON.parse(formDataString);
  }
}

On peut voir que l'utilisation des fonctions de hook beforeRouteLeave et créées peut facilement implémenter la fonction de conservation des données de formulaire après que Vue passe à la page, et peut également améliorer l'expérience utilisateur de l'application.

Application pratique

Ce qui précède est un exemple simple dans des applications réelles, nous pouvons l'utiliser de manière flexible en fonction des besoins. Par exemple, enregistrez les données du formulaire sur la page d'édition et restaurez les données lors du retour ; enregistrez les données sur une nouvelle page, mais n'utilisez pas sessionStorage sur la page actuelle, puis restaurez les données après avoir accédé à d'autres pages ; pour sauvegarder des données pendant une longue période, etc.

Conclusion

Vue conserve les données du formulaire après avoir accédé à la page est une exigence courante, qui peut être facilement réalisée à l'aide du stockage de données côté client et des fonctions de pré-accrochage. Dans le développement réel, nous pouvons utiliser ces méthodes de manière flexible en fonction des besoins pour améliorer l'expérience utilisateur de l'application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!