Vue：如何根据所选选项更改路线，并在<select>元素？

Question

我可以根据我的 Dropdown 组件中选择的选项更改路线。 但是，选择菜单没有显示正确的 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 页”显示为所选值。 如何在路由更改后相应地更新 select 元素的默认选定值？

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

Answer 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 的新手，所以不确定为什么这能解决我的问题，但确实如此。 如果有人想解释，请随意。