如何在 Vuejs 中的 select 选项下拉列表中使用路由器链接？

Question

 a.vue <template> <div>hi i am component 1</div> </template> <script> export default { name: "a", }; </script> b.vue <template> <div>hi i am component 2</div> </template> <script> export default { name: "b", }; </script>

 const router = new VueRouter({ mode: "history", routes: [ { path: "/a", name: "a", component: a }, { path: "/b", name: "b", component: b } ] });

 <template> <div class="select"> <select name="format" id="format" v-on:change="changeRoute($event)"> <option selected>Settings</option> <option value="">a</option> <option value="">b</option> </select> </div> </template> <script> export default { name: "HelloWorld", methods: { changeRoute(e) { this.$router.push("/a" + e.target.value); // this.$router.push("/b" + e.target.value); not working.... }, }, }; </script>

如何路由到另一个组件，当值 select 从 Vuejs 的下拉列表中使用路由器链接时。

目前的问题是，我可以使用路由器链接重定向到组件，通过在 select 中设置点击事件。

在 select 内部，我有两个选项，分别称为“hello”、“hlll”。 这两件事都在哪里导航到同一页面。 但我需要为不同的选项设置不同的组件。

Answer 1

代码问题。

应用程序.vue

• 您尚未在App.vue中添加<router-view></router-view>来保存路由部分

你好世界.vue

• 您尚未使用 select 中的options的value 。 您应该将值用作a和b 。

模板

<select name="format" id="format" v-on:change="changeRoute($event)">
  <option selected>Settings</option>
  <option value="a">a</option>
  <option value="b">b</option>
</select>

从组件中，您可以收听更改事件并进行导航。

methods: {
  changeRoute(e) {
    this.$router.push("/" + e.target.value);
  },
},

由于您已经为每个选项设置了值，因此您将在 change 事件中为e.target.value提供一个有效值。

工作小提琴

Answer 2

将$event添加到更改事件处理程序，然后在路由器链接推送方法中使用该参数：

  <select name="format" id="format" v-on:change="changeRoute($event)">

  methods: {
    changeRoute(e) {
      this.$router.push('/'+e.target.value)
    }
  }

Answer 3

您可以使用您的路线创建数据 object，将它们添加到 select，并相应地选择路线：

 const Home = { template: '#home', data() { return { links: [{name: 'hello', link: 'mycomp'}, {name: 'hllll', link: 'othercomp'}], selectedLink: null } }, methods: { changeRoute() { this.$router.push(this.selectedLink); } }, } const Component1 = { template: '#component1' }; const Component2 = { template: '#component2' }; const routes = [ { path: '', component: Home }, { path: '/mycomp', component: Component1 }, { path: '/othercomp', component: Component2 } ] const router = new VueRouter({ routes }); new Vue({ router }).$mount('#app');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/vue-router"></script> <script type="text/x-template" id="home"> <div> <h2>Home</h2> <div class="select"> <select name="format" id="format" v-model="selectedLink" @change="changeRoute"> <option:value="''" selected disabled>select link from below</option> <option v-for="(link, i) in links":key="i":value="link.link"> {{ link.name }} </option> </select> </div> </div> </script> <script type="text/x-template" id="component1"> <div> <h2>mycomp</h2> <router-link to="/">Home</router-link> </div> </script> <script type="text/x-template" id="component2"> <div> <h2>othercomp</h2> <router-link to="/">Home</router-link> </div> </script> <div id="app"> <h1>routing with select</h1> <router-view></router-view> </div>