How to use router-link inside of select option dropdown in 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>

How to route to another component, When value select from dropdown in Vuejs using router link.

At present issue is, I am able to redirect to component using router-link, By setting the click event in the select.

Inside select, I have two options called "hello", "hlll". Where for both things it is navigating to same page. But I need to set the different component for different option.

Answer 1

Add $event to the change event handler then use that parameter in router link push method :

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

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

Answer 2

You can create data object with your routes, add them to select , and route on selected accordingly:

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>