vue应用中如何将选中的选项转移到另一个页面？
在我的Vue应用程序的第一页上，我有一个包含邮箱列表的下拉菜单。
我想保存选择的值/文本并将其用作我路由到的收件箱页面上的参数或变量。
这是使用的下拉代码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>
如何保存选定的邮箱值以在路由至收件箱页面上使用？
回答
我建议你开始使用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>
回答
将选定的值作为路由参数传递：
$router.push({
name: "Inbox",
params: { selectedValue: YOUR_VALUE }
});
在收件箱页面，您可以通过以下方式访问它：
$route.params.selectedValue