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

    } 

}