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

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>

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

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

在select内部，我有两个选项，称为"；你好"hlll"；。对于这两件事，它导航到同一页。但我需要为不同的选项设置不同的组件。

Answer 1

代码问题。

App.vue

• 您尚未在App.vue中添加<router-view></router-view>以容纳路由部分

HelloWorld.vue

• 您尚未将value用于select中的options。您应该使用值作为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);
},
},

由于您已经为每个选项设置了值，因此在更改事件中会有一个有效的e.target.value值。

工作Fiddle

Answer 2

您可以用您的路线创建数据对象，添加它们以进行选择，并相应地在选定的路线上进行路由：

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>

Answer 3

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

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

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