Comment résoudre le problème de Vue Router qui ne conserve pas la page d'origine

Vue Router est une solution de gestion de routage officiellement fournie par Vue.js, qui peut réaliser des sauts de page et des composants de chargement dynamique d'applications monopage (SPA). L'importance de Vue Router est évidente, il peut offrir une meilleure expérience utilisateur et une meilleure efficacité pour les projets.

Mais lors de l'utilisation de Vue Router, nous pouvons rencontrer un problème : lors du passage à une page, la page d'origine sera détruite, et l'état et les données d'origine ne pourront pas être conservés. Cette situation se produit généralement lors de l'utilisation de vue-router pour accéder à une page entre domaines, par exemple en passant d'un nom de domaine ou d'un nom de sous-domaine à une page d'un autre nom de domaine ou nom de sous-domaine. À ce stade, l'itinéraire passe d'une page Web à une autre, la page entière doit être rechargée et l'état et les données précédents seront perdus.

Alors, comment résoudre le problème de Vue Router qui ne conserve pas la page d'origine ? Voici quelques solutions :

1. Utiliser le composant Keep-Alive

Vue.js fournit le composant Keep-Alive, qui est capable de mettre en cache ce qui a été chargé avec des instances de composants passées, elles ne seront pas restituées ni détruites. Utilisez le composant Keep-Alive pour conserver l'état et les données de la page d'origine lorsque la page saute.

Ajoutez le composant Keep-Alive au composant qui doit conserver l'état et les données, comme indiqué ci-dessous :

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

De cette façon, l'état et les données du composant peuvent être conservés tandis que les sauts de page sont obtenus.

2. Utilisation du stockage

Si vous ne souhaitez pas utiliser le composant Keep-Alive, vous pouvez également utiliser le stockage pour stocker l'état de la page et données. Écoutez la fonction de cycle de vie du saut d'itinéraire avantRouteLeave dans le composant et stockez l'état et les données qui doivent être enregistrées dans le stockage dans la fonction de cycle de vie créée après le saut d'itinéraire, lisez l'état et les données du stockage et restaurez-les dans le composant ; .

Le code spécifique est implémenté comme suit :

// 路由跳转前保存组件状态和数据到Storage
beforeRouteLeave(to, from, next) {
  localStorage.setItem('data', JSON.stringify(this.data));
  next();
}
// 路由跳转后从Storage中读取组件状态和数据并赋值给组件
created() {
  let data = JSON.parse(localStorage.getItem('data'));
  if (data) {
    this.data = data;
  }
}

De cette façon, l'état et les données de la page d'origine peuvent être conservés lorsque la page saute.

3. Using Vuex

Vuex est un framework de gestion d'état pour Vue.js, utilisé pour partager l'état entre plusieurs composants. Si vous devez conserver l'état et les données de la page, vous pouvez utiliser Vuex pour stocker l'état et les données de la page dans l'état global, puis les lire à partir de l'état global et les attribuer au composant après le saut de page.

Le code spécifique est implémenté comme suit :

// 在Vuex Store中定义状态和数据
const state = {
  data: {}
}
const mutations = {
  setData(state, data) {
    state.data = data;
  }
}
// 在组件中引入Vuex和Store，并将数据存储在全局状态中
import { mapMutations } from 'vuex';
export default {
  methods: {
    ...mapMutations(['setData']),
    beforeRouteLeave(to, from, next) {
      this.setData(this.data);
      next();
    }
  },
  created() {
    this.data = this.$store.state.data;
  }
}

De cette façon, l'état et les données de la page d'origine peuvent être conservés via Vuex lorsque la page saute.

Résumé :

Voici plusieurs solutions courantes au problème selon lequel Vue Router ne conserve pas le statut et les données de la page d'origine. Elles ont chacune leurs propres avantages et inconvénients. et peut être sélectionné en fonction des besoins spécifiques de l'entreprise. Qu'il s'agisse de composants Keep-Alive, de stockage ou de Vuex, ils peuvent nous aider à conserver l'état et les données d'origine lorsque la page saute, améliorant ainsi l'expérience utilisateur et l'efficacité.

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!