vue使用ant-design-vue实现搜索下拉框并进行跳转

 main.js配置 ：基本配置，引入ant-design-vue和对应的css样式

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.config.productionTip = false
Vue.use(antd);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 配置App.vue，加载路由

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

router/index.js ：路由配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import HtmlVue from '../views/HtmlVue'
import JsVue from '../views/JsVue'
import PythonVue from '../views/PythonVue'

Vue.use(Router)

let routes = [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
  {
    path: '/js',
    name: 'Javascript',
    component: JsVue
  },
  {
    path: '/html',
    name: 'Html',
    component: HtmlVue
  },
  {
    path: '/python',
    name: 'Python',
    component: PythonVue
  },
  ];

let router = new Router({
  routes: routes
});
export default router;

添加HelloWorld、HtmlVue、JsVue、PythonVue对应的vue文件

<template>
  <div class="hello">
    <a-select
      show-search
      :value="value"
      placeholder="请输入关键词"
      style="width: 200px"
      :default-active-first-option="false"
      :filter-option="false"
      :not-found-content="null"
      @search="handleSearch"
      @change="handleChange"
    >
      <a-icon slot="suffixIcon" type="search"></a-icon>
      <a-select-option v-for="d in data" :key="d.value">
        {{ d.text }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      data: [],//搜索事件
      value: undefined,
    };
  },
  methods: {
    // 输入框搜索，相当于watch监听该搜索框内容，触发的事件函数
    handleSearch(keyword) {
      //模拟往服务器发送请求
      this.ajax(keyword);
    },
    // 点击某个搜索结果时触发的事件
    handleChange(value) {
      console.log(value);
      let path = "/"+value;
      //跳转到不同的路由
      this.$router.push(path)
    },
    //模拟发送请求返回数据
    ajax(keyword){
      var that=this;
      that.data = [];
      let temp = ["js","html","python"];
      let i = 0;
      temp.forEach((item) => {
        that.data.push({
          value: item,
          text:item+i,
        });
        i++;
      });
    }
  },
}
</script>

<template>
<h1>我是html</h1>
</template>

<script>
export default {
name: "HtmlVue"
}
</script>

<style scoped>

</style>

<template>
  <h1>我是js</h1>
</template>

<script>
export default {
name: "JsVue"
}
</script>

<style scoped>

</style>

<template>
  <h1>我是python</h1>
</template>

<script>
export default {
name: "PythonVue"
}
</script>

<style scoped>

</style>

展示效果图片展示：

 通过选择不同的选项就可以跳转到对应的路由