route.params n'est pas défini lors du transfert de données entre composants via route.push

Question

Je souhaite transmettre les données de Homepage.vue à clickthru.vue.

Cliquez sur un enregistrement dans le tableau (dans Homepage.vue) Je souhaite accéder à un nouveau composant (clickthru.vue). L'objectif est de transmettre deux types de données de deux manières différentes :

Premier : Je souhaite transmettre cve_id comme route.query comme ceci

/clickthru?cve_id=CVE-xxxx-xxxx

Deuxième : Je souhaite également passer un objet en tant que paramètre à rendre/installer sur le modèle html de clickthru.vue.该对象看起来像这样：

{ "cve" : "CVE-2022-45869", "gravité" : "Moyenne", "packages" : [ { " ;package": "noyau", "version": "5.15.80.1", "propriétaire": "joslobo", "date_detection": "12-03-2022", "BranchStatus" : { "1.0" : { "sourceBranch" : "NULL", "statut" : "NULL", "detectedOn": "NULL", "patchedOn" : "NULL", " ;firstPatchedPackageRelease" : "NULL", "fixReleaseDate" : "NULL", "aid" : "NULL", "qid" : [ "NULL" ] }, "2.0" : { "sourceBranch" : "2.0", "statut" : "Non corrigé", "detectedOn" : "12-03-2022", "patchedOn" : "NULL", "firstPatchedPackageRelease" : "NULL", "fixReleaseDate" : "NULL", "aid" : "11574", "qid" : [ "Non attribué" ] } } }, { "package" : "noyau", "version" : "5.10.155.1", "propriétaire" : "joslobo", "date_detection" : "12-03- 2022", "BranchStatus" : { "1.0" : { "sourceBranch" : "1.0", "statut" : "Non corrigé", "detectedOn" : "12-03-2022" , "patchedOn" : "NULL", "firstPatchedPackageRelease" : "NULL", "fixReleaseDate" : "NULL", "aid" : "11573", "qid" : [ "Non Attribué" ] }, "2.0" : { "sourceBranch" : "NULL", "statut" : "NULL", "detectedOn" : "NULL", "patchedOn" : "NULL", "firstPatchedPackageRelease" : "NULL", "fixReleaseDate" : "NULL", "aid" : "NULL", "qid" : [ "NULL" ] } } } ] }≪/pré>
<p>在我的<em>homepage.vue</em>中，我迭代记录/对象并以表格格式显示，如下所示：
<strong>Homepage.vue</strong></p>
<pre class="brush:php;toolbar:false;"><tbody>
    <template v-for="(cve) dans backend_res">
        <template v-for="(pack_key, index) dans Object.keys(cve.packages)">
            <tr>
                <td>
                    <span v-if="index == 0" @click.prevent="onAboutClick(cve.cve, cve.packages)">
                                        {{cve.cve}}
                    </envergure>
               </td>
            ≪/tr>
       </modèle>
    </modèle>
</tbody>

méthodes : {
   onAboutClick(cve_id, cve_obj) {
     console.log('----> cve_id = ', cve_id)
     console.log('----> cve_obj = ', cve_obj) // cve_obj est imprimé avec succès à ce stade
     ceci.$router.push(
        {
          nom : 'clic',
          requête : {'cve_id' : cve_id},
          paramètres : {'cve_obj' : cve_obj}
        })}
clickthru.vue

Answer 1

Comme je l'ai mentionné dans les commentaires, transmettre des objets en tant que paramètres de requête n'est pas une méthode populaire, il existe donc deux façons de le faire -

Méthode 1-
Seulement cve_id 传递给新路由，并在安装新路由的页面时，使用此查询参数 cve_id 从后端获取 cve_object. Cette approche est utile et recommandée car vous obtenez toujours des données mises à jour du backend.

Si vous suivez cette approche, quelques changements doivent être apportés -

1. Passez simplement cve_id à votre nouvel itinéraire dans Homepage.vue -

methods: {
    onAboutClick(cve_id) {
        this.$router.push({
            name: "clickthru",
            query: { cve_id: cve_id },
        });
    },
},

2. au clickthru.vue 安装的挂钩上，初始化 API 调用以获取该 id 的 cve_data-

mounted() {
 // Make an API call to fetch the respected id's data
}

Méthode 2-
Lorsque vous recevez un enregistrement (celui en boucle) dans HomePage.vue, enregistrez ces données dans votre Statut VuexHomePage.vue 中收到记录（正在循环的记录）时，请将此数据保存到您的 Vuex 状态。现在，与方法一相同，仅将 cve_id. Maintenant, comme pour la première méthode, transmettez simplement à la nouvelle route et récupérez-la à partir de l'état Vuex

au lieu d'un appel API supplémentaire lorsque la page de la nouvelle route est installée.

Si vous suivez cette méthode, le processus sera comme ceci-

Lorsque vous recevez une réponse du backend dans HomePage.vue, déposez-la dans l'état comme ci-dessous -

const store = new Vuex.Store({
  state: {
    records: []
  },
  mutations: {
    SET_RECORDS (state, backend_response) {
      // mutate state
      state.records = backend_response;
    }
  }
})

2. cve_id，因此可以使用它从状态获取相关的 cve_object。因此，在安装了 clickthru.vue Comme pour la première méthode, vous avez
dans votre requête de routage, vous pouvez donc l'utiliser pour obtenir le cve_object pertinent de l'état. Donc, après avoir installé clickthru.vue, procédez comme suit -

<script>
export default {
    data() {
        return {
            cve_object: null,
        };
    },
    mounted() {
        this.cve_object = this.$store.state.records.find(
            (item) => item.id == this.$route.query.cve_id,
        );
    },
};
</script>

cve_idDe cette façon, vos enregistrements seront dans cet état afin que vous puissiez utiliser la requête sur n'importe quelle page pour trouver n'importe quel enregistrement.

Attention-
Je donne seulement l'idée d'obtenir et de définir des données de l'état. Si vous souhaitez adopter la deuxième approche, lisez simplement Vuex et suivez la documentation. Vous pouvez également consulter le guide complet ici Comment configurer Vuex dans une application Vue

. 🎜