<p>在我的Vue应用的第一页,我有一个包含邮箱列表的下拉菜单。</p>
<p>我想保存选择的值/文本,并将其作为参数或变量在我路由到的收件箱页面上使用。</p>
<p>这是使用v-autocomplete的下拉菜单代码:</p>
<pre class="brush:html;toolbar:false;"><v-autocomplete dense
filled
label="选择邮箱"
v-model="mailboxes"
:items="mailboxes"
item-text='mailbox'
item-value='mailbox'>
</v-autocomplete>
</pre>
<p>这是一个作为v-btn的按钮,用于路由到收件箱页面。</p>
<pre class="brush:html;toolbar:false;"><v-btn rounded color="primary"
@click="$router.push('Inbox')">
加载邮箱</v-btn>
</pre>
<p>如何保存所选邮箱的值以在路由到的收件箱页面上使用?</p>
将选定的值作为路由参数传递:
$router.push({ name: "Inbox", params: { selectedValue: YOUR_VALUE } });在收件箱页面中,您可以通过以下方式访问:
我建议你开始使用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="选择邮箱" :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>