如何将选定的选项转移到 vue 应用程序中的另一个页面？

Question

在我的 Vue 应用程序的第一页上，我有一个 下拉菜单，其中包含一个邮箱列表。

我想保存选择的 value/text 并将其用作我路由到的 收件箱页面 上的参数或变量。

这里是使用v-autocomplete的下拉代码：

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

这是路由到 收件箱页面 的按钮 v-btn。

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

如何保存选定的邮箱值以在路由至收件箱页面上使用？

Answer 1

我建议你开始使用 Vuex :)

这是一个在整个应用程序中共享响应式数据对象的库。

您可能会这样：

// /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="Choose Mailbox"
        :items="mailboxes"
        item-text='mailbox'
        item-value='mailbox'>
      </v-autocomplete>
</template>

<script>
export default {
   computed: {
      mailboxes: {
         get() {
            this.$store.state.mailbox // Get the value from the Vuex store
         },
         set(newMailbox) {
            this.$store.commit('SET_MAILBOX', newMailbox) // Update the Vuex store
         },
      }
   }
}
</script>

Answer 2

将所选值作为路由参数传递：

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

在收件箱页面，您可以通过以下方式访问：

$route.params.selectedValue

Answer 3

其他简单的解决方案是使用浏览器本地存储。 Vue Client-Side Storage

如何将选定的选项转移到 vue 应用程序中的另一个页面？

How transfer a selected option to another page in vue application?

vue.js

vue-router

vuetify.js