<template><div><van-searchplaceholder="请输入搜索关键词" show-action  @focus="searchFocus"/><div class="search-title">搜索历史<van-icon name="delete" @click="del" /></div><van-cell-group><van-cell v-for="(item,index) in kwList" :key="index" :title="item" v-show="index < 3" /></van-cell-group></div>
</template><script>
export default {data(){return {kwList: []}},created(){let kwList = localStorage.kwListif(kwList){this.kwList = JSON.parse(kwList)}},methods:{searchFocus(){this.$router.push({path: '/search2'})},del(){this.$dialog.confirm({message: '确定要清空吗？'}).then(()=>{this.kwList = []localStorage.kwList = JSON.stringify(this.kwList)}).catch(()=>{})}}
}
</script><style scoped>
.search-title{margin: 10px 0px;display: flex;justify-content: space-between;
}
</style>

##第二页

<template><div><van-search v-model="kw" placeholder="请输入搜索关键词" show-action  autofocus@cancel="back"@input="search"/><van-cell-group><van-cell v-for="(item,index) in showList" :key="index" :title="item.title"@click="onSearch(item.title)"/></van-cell-group></div>
</template><script>
export default {data(){return {kw: '',list: [],showList: [],kwList: []}},created(){this.$axios.get('http://localhost:8080/data.json').then(res=>{this.list = res.data.data})let kwList = localStorage.kwListif(kwList){this.kwList = JSON.parse(kwList)}},methods:{back(){this.$router.push({path: '/'})},search(val){this.showList = []this.list.map(item=>{if(item.title.includes(val)){this.showList.push(item)}})},onSearch(title){this.$router.push({path: '/list',query: {kw: title}})this.kwList.unshift(title)localStorage.kwList = JSON.stringify(this.kwList)}}
}
</script><style></style>

结果页

```css
<template><div><van-cardv-for="(item,index) in showList":key="index"num="2"price="2.00"desc="描述信息":title="item.title"thumb="https://img.yzcdn.cn/vant/ipad.jpeg"/></div>
</template><script>
export default {data(){return {showList: []}},created(){let kw = this.$route.query.kw;this.$axios.get('http://localhost:8080/data.json').then(res=>{// 获取所有数据let list= res.data.listlist.map(item=>{if(item.title.includes(kw)){this.showList.push(item)}})})}
}
</script><style></style>