Bagaimana untuk melaksanakan aplikasi Vue untuk memindahkan pilihan yang dipilih ke halaman lain

Question

Pada halaman pertama apl Vue saya, saya mempunyai menu lungsur turun yang mengandungi senarai alamat e-mel.

Saya ingin menyimpan nilai/teks yang dipilih dan menggunakannya sebagai parameter atau pembolehubah pada halaman peti masuk yang saya tuju.

Ini ialah kod menu lungsur turun menggunakan v-autolengkap:

Ini ialah butang yang bertindak sebagai v-btn dan digunakan untuk laluan ke halaman peti masuk. 

Muatkan peti mel

Bagaimanakah saya boleh menyimpan nilai peti mel yang dipilih untuk digunakan pada halaman peti masuk yang saya tuju? 

Answer 1

Luluskan nilai yang dipilih sebagai parameter penghalaan:

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

Dalam halaman Peti Masuk anda boleh mengakses melalui:

$route.params.selectedValue

Answer 2

Saya syorkan anda mula menggunakan Vuex :)

Ini ialah perpustakaan yang boleh berkongsi objek data reaktif sepanjang aplikasi anda.

Berikut ialah contoh kod anda yang mungkin:

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