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

CodePudding user response：

Issues with the code.

App.vue

• You have not added <router-view></router-view> in your App.vue to hold the routing section

HelloWorld.vue

• You have not used value for the options in select. You shoulld use values as a and b.

Template

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

And from the component you can listen to change event and navigate like.

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

Since you have set the value for each option you will have a valid value for e.target.value inside the change event.

Working Fiddle

CodePudding user response：

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)
    }
  }

CodePudding user response：

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