问题:
在搜索页面,搜索出饼干商品,点击某饼干商品进入商品详情页,
再从商品详情页返回到搜索页面后,搜索页面应该依旧保留之前的搜索结果。
效果图:
解决方式:
1、搜索页面路由设置
{ // 搜索 path: 'search', name: 'search', component: Search, meta:{ keepAlive: true, isUseCache:false } }
2、商品详情页JS
export default { beforeRouteLeave (to, from, next) { //跳转到搜索页面时,search为搜索页面名称 if (to.name == 'search') { to.meta.isUseCache = true; } next(); }, }
3、搜索页面
===HTML部分
<div style="margin-top: 7px;" v-for="good in goods"> <van-card @click="goToDetail(good.seriesId)"//跳转到详情页面 :price="good.price" :desc="`${good.kwname} ${good.pricetag}`" :title="good.seriesname" :thumb ="good.seriesimg" class="goods-card" /> </div>
===JS部分
export default { data(){ return{ GoodTitle:"", good:[] } }, activated() { // isUseCache为false时才重新刷新获取数据 // 因为对goods使用keep-alive来缓存组件,所以默认是会使用缓存数据的 if(!this.$route.meta.isUseCache){//false this.goods = []; // 清空原有数据 this.GoodsTitle = ""; this.onLoad(); // 这是我们获取数据的函数 this.$route.meta.isUseCache = false; } else { this.$route.meta.isUseCache = false; } }, methods:{ //获取商品详情 goToDetail(sid) { //alert("aaa"); this.$router.push({ name: "goodsDetail", params: { id: sid } }); } } }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步