vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演

<div class="header-center">
<search placeholder="开学季有礼，好货五折起" @query='getQuery' fake @click.native="goToSearch" />
</div>
<i class="iconfont icon-msg header-right"></i>
</div>
</template>

<script>
import Search from 'components/search';

export default {
name:'CategoryHeader',
components:{
Search
},
methods:{
getQuery(query){
console.log(query);
},
goToSearch(){
this.$router.push('/search');
}
}
}
</script>

<style lang="scss" scoped>
.header{
background-color:rgba(222, 24, 27, 0.9);
transition:background-color 0.5s;
display: flex;
justify-content: space-between;
align-items: center;
padding:5px 20px;

.iconfont{
font-size:24px;
color:#fff;
}

.header-center{
flex:1;
}
}
</style>

点击搜索框之后会跳转到真正的搜索页

热门搜索组件

src/pages/search/hot.vue

<template>
 <div class="hot">
  <h4 class="hot-title">热门搜索</h4>
  <div class="loading-container" v-if="!hots.length">
   <me-loading/>
  </div>
  <ul class="hot-list" v-else>
   <li class="hot-item" v-for="(item,index) in hots" :key="index" @click="$_selectItem(item.hotWord)">
     {{item.hotWord}}
   </li>
  </ul>
 </div>
</template>
<script>
import Search from 'components/search';
import MeLoading from 'components/loading';
import {getHot} from 'api/search';
import {searchMixin} from 'api/mixins';
export default {
  name:'SearchHot',
  components:{
    MeLoading
  },
  data(){
    return{
      hots:[]    }
  },
  mixins:[searchMixin],
  created(){
    this.getHot().then(()=>{
      this.$emit('loaded');
    })
  },
  methods:{
    getHot(){
      return getHot().then(data=>{
        return new Promise(resolve=>{
          if(data){
            this.hots=data;
            resolve();
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$border-color: #e5e5e5;
$font-size-base: 12px;
$font-size-l: $font-size-base + 2;
 .hot {
  padding-left: 10px;
  background-color: #fff;
  border-bottom: 1px solid $border-color;
  margin-bottom: 10px;
  &-title {
   height: 34px;
   line-height: 34px;
   font-size: $font-size-l;								 
 2/8   首页 上一页 1 2 3 4 5 6 下一页 尾页