Comment implémenter l'application Vue pour transférer les options sélectionnées vers une autre page

Question

Sur la première page de mon application Vue, j'ai un menu déroulant contenant une liste d'adresses e-mail.

Je souhaite enregistrer la valeur/le texte sélectionné et l'utiliser comme paramètre ou variable sur la page de boîte de réception vers laquelle je me dirige.

Voici le code du menu déroulant utilisant v-autocomplete :

≪/pré>
Il s'agit d'un bouton qui agit comme un v-btn et est utilisé pour accéder à la page de la boîte de réception. 

Charger la boîte aux lettres
≪/pré>
Comment puis-je enregistrer la valeur d'une boîte aux lettres sélectionnée pour l'utiliser sur la page de boîte de réception vers laquelle je suis acheminé ? 

Answer 1

Passez la valeur sélectionnée comme paramètre de routage :

$router.push({
    name: "Inbox",
    params: { selectedValue: YOUR_VALUE }
  });

Dans la page Boîte de réception, vous pouvez accéder via :

$route.params.selectedValue

Answer 2

Je vous recommande de commencer à utiliser Vuex :)

Il s'agit d'une bibliothèque qui peut partager des objets de données réactifs dans toute votre application.

Voici des exemples de votre code possible :

// /store/index.js

export state: () => {
   mailbox: '',
}

export mutation: () => {
   SET_MAILBOX(state, mailbox) {
      state.mailbox = mailbox
   }
}

// your-page.vue
<template>
    <v-autocomplete
        v-model="mailboxes"
        dense
        filled
        label="选择邮箱"
        :items="mailboxes"
        item-text='mailbox'
        item-value='mailbox'>
      </v-autocomplete>
</template>

<script>
export default {
   computed: {
      mailboxes: {
         get() {
            this.$store.state.mailbox // 从Vuex存储中获取值
         },
         set(newMailbox) {
            this.$store.commit('SET_MAILBOX', newMailbox) // 更新Vuex存储
         },
      }
   }
}
</script>