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>How to navigate to a different component when selecting a value from the dropdown in Vue.js using router link.
Currently, I have an issue where I can redirect to a component using router-link by setting the click event in the select element.
Within the select element, there are two options named "hello" and "hlll". Both options navigate to the same page. However, I need to set a different component for each option.