Vue 返回上一页,记住上一页的数据

问题:在搜索页面,搜索出饼干商品,点击某饼干商品进入商品详情页,再从商品详情页返回到搜索页面后,

搜索页面应该依旧保留之前的搜索结果。

解决方式

==============搜索页面路由设置===================================
{
// 搜索
path: 'search',
name: 'search',
component: Search,
meta:{
keepAlive: true,
isUseCache:false
}
}
========商品详情页JS=========================================
export default {
   beforeRouteLeave (to, from, next) {
        //跳转到搜索页面时,search为搜索页面名称
            if (to.name == 'search') {
                to.meta.isUseCache = true;
            }
            next();
        },
}


========搜索页面===========================================
<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>

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
}
});
}
    } 

}









  

原文地址:https://www.cnblogs.com/syeacfpl/p/13724574.html