Home.vue：
<template><div><van-search
shape="round"
v-model="kw"
placeholder="请输入搜索关键词"
@click="onSearch"/></div></template><script>exportdefault{data(){return{
kw:''}},
methods:{onSearch(){this.$router.push({
path:'/search'})}}}</script><style></style>Search.vue：
<template><div><!-- vant搜索--><van-search @input="onInput" @search="onSearch" autofocus show-action shape="round" v-model="kw" placeholder="请输入搜索关键词"><template #left><van-icon @click="back" style="margin-right: 5px;" size="22px" name="arrow-left"/></template><template #action><van-button @click="onSearch" size="small" type="danger" style="border-radius: 5px; font-size: 14px;">搜索</van-button></template></van-search><!-- 搜索历史--><div v-show="isShow"><divclass="search-host"><span>搜索记录：</span><van-icon name="delete" @click="del"/></div><div><van-tag v-for="(item,index) in kwList" @click="searchTs(item)" style="margin: 5px;">{{item}}</van-tag></div></div><!-- 搜索提示--><van-cell-group v-show="!isShow"><van-cell v-for="(item,index) in showList":title="item.title"
@click="searchTs(item.title)"/></van-cell-group></div></template><script>exportdefault{data(){return{
kw:'',
isShow:true,
list:[],//所有数据
showList:[],//搜索提示数据
kwList:[]//搜索记录}},created(){//初始化保存let kwlist= localStorage.kwListif(kwlist){this.kwList=JSON.parse(kwlist)}},mounted(){this.$axios.get('/search.json').then(res=>{// console.log(res.data.data)this.list= res.data.data})},
methods:{back(){//返回this.$router.push({
path:'/'})},onInput(){//搜索提示this.showList=[]this.list.map(item=>{if(item.title.includes(this.kw)){this.showList.push(item)}})if(this.kw.trim()==''){//显示或隐藏搜索提示this.isShow=true}else{this.isShow=false}},searchTs(title){//点击搜索提示或搜索记录，展示对应商品this.$router.push({
path:'/showlist',
query:{
kw:title}})if(!this.kwList.includes(title)){//不会重复添加相同搜索记录this.kwList.push(title)
localStorage.kwList=JSON.stringify(this.kwList)}},onSearch(){//确定搜索或点击搜索时触发if(this.kw.trim()==''){//判断内容是否为空return}this.$router.push({
path:'/showlist',
query:{
kw:this.kw}})if(!this.kwList.includes(this.kw.trim())){//不会重复添加相同搜索记录this.kwList.push(this.kw)
localStorage.kwList=JSON.stringify(this.kwList)}},del(){//删除搜索记录this.$dialog.confirm({
message:'确定要清空搜索记录吗？',}).then(()=>{this.kwList=[]
localStorage.kwList=JSON.stringify(this.kwList)}).catch(()=>{// on cancel});}}}</script><style scoped>.search-host{
display: flex;
justify-content: space-between;
align-items: center;
padding:05px;
box-sizing: border-box;}</style>ShowList.vue：
<template><div><van-card
v-for="(item,index) in showGoods"
num="2"
price="2.00"
desc="描述信息":title="item.title"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg"/></div></template><script>exportdefault{data(){return{
showGoods:[]}},created(){let kw=this.$route.query.kwthis.$axios.get('/search.json').then(res=>{let goods= res.data.list
goods.map(item=>{if(item.title.includes(kw)){this.showGoods.push(item)}})})}}</script><style></style>search.json：
{"data":[{"title":"html"},{"title":"css"},{"title":"javascript"},{"title":"jquery"},{"title":"vue"},{"title":"node.js"},{"title":"bootstrap"},{"title":"react"}],"list":[{"title":"vue从入门到放弃"},{"title":"vue从开发到脱发"},{"title":"node.js从开发到放弃"},{"title":"node.js从开发到脱发"},{"title":"html从入门到放弃"},{"title":"html从开发到脱发"},{"title":"css从开发到放弃"},{"title":"css从开发到脱发"},{"title":"javascript从入门到放弃"},{"title":"javascript从开发到脱发"},{"title":"jquery从开发到放弃"},{"title":"jquery从开发到脱发"},{"title":"bootstrap从入门到放弃"},{"title":"bootstrap从开发到脱发"},{"title":"react从开发到放弃"},{"title":"react从开发到脱发"}]}