Vue：如何根据选择的选项更改路线，并在 <select> 元素中显示默认选择的选项？

Posted 2023-02-23

【中文标题】Vue：如何根据选择的选项更改路线，并在 <select> 元素中显示默认选择的选项？

【英文标题】：Vue: How to change route based on selected option, AND also show the default selected option in a <select> element?

【发布时间】：2021-02-18 14:55:22

【问题描述】：

我可以根据下拉组件中选择的选项更改路线。但是，选择菜单未显示正确的 onChange 选择值。

这是我的组件：

<template>
  <select v-model="accountMenuOption" @change="onChange()">
    <option value="/">Page 1</option>
    <option value="/2">Page 2</option>
    <option value="/3">Page 3</option>
  </select>
</template>

<script>

export default 
  name: 'AccountDropdown',
  data() 
    return 
      accountMenuOption: '/',
    ;
  ,
  methods: 
    onChange() 
      this.$router.push(this.accountMenuOption);
    ,
  ,
;
</script>

当我选择第二个选项时，路线变为/2，这很棒。但是，一旦路由更改，选择元素不会通过将默认选定值显示为“第 2 页”来更新。它只是继续将“第 1 页”显示为所选值。在路由更改后，如何使选择元素的默认选定值相应更新？

【参考方案1】：

它可以正常工作，如下例所示：

Vue.config.devtools = false;
Vue.config.productionTip = false;
const Page1 = 
  template: '<div>page 1</div>'

const Page2 = 
  template: '<div>page 2</div>'

const Page3 = 
  template: '<div>page 3</div>'


const routes = [
    path: '/',
    component: Page1
  ,
  
    path: '/2',
    component: Page2
  ,
  
    path: '/3',
    component: Page3
  
]

const router = new VueRouter(
  routes
)
new Vue(
  el: '#app',
  router,
  data() 
    return 
      accountMenuOption: '/',
    ;
  ,
  methods: 
    onChange() 
      this.$router.push(this.accountMenuOption);
     
    ,
  ,
)

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app" class="container">
  <select v-model="accountMenuOption" @change="onChange()">
    <option value="/">Page 1</option>
    <option value="/2">Page 2</option>
    <option value="/3">Page 3</option>
  </select>
  <router-view></router-view>
</div>

【参考方案2】：

我最终通过在组件导出中添加以下内容解决了这个问题：

  created() 
    // Make sure the correct option is shown on load
    this.accountMenuOption = this.$router.history.current.fullPath;
  ,
  watch: 
    // Watch for route changes
    $route(route) 
      // Change the value of the selected option
      this.accountMenuOption = route.path;
    ,
  ,

我是 Vue 的新手，所以不确定为什么这能解决我的问题，但确实可以。如果有人想解释，请随时。