How to implement Vue application to transfer selected options to another page

Question

On the first page of my Vue app, I have a dropdown menu containing a list of email addresses.

I want to save the selected value/text and use it as a parameter or variable on the inbox page I route to.

This is the code for the dropdown menu using v-autocomplete:

<v-autocomplete dense
  filled
  label="Select Email"
  v-model="mailboxes"
  :items="mailboxes"
  item-text='mailbox'
  item-value='mailbox'>
</v-autocomplete>

This is a button that acts as a v-btn and is used to route to the inbox page.

<v-btn rounded color="primary"
  @click="$router.push('Inbox')">
Load mailbox</v-btn>

How do I save the value of a selected mailbox for use on the inbox page I route to?

Answer 1

Pass the selected value as a routing parameter:

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

From the Inbox page you can access via:

$route.params.selectedValue

Answer 2

I suggest you start using Vuex :)

This is a library that can share reactive data objects throughout your application.

Here are examples of your possible code:

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