zoukankan      html  css  js  c++  java
  • 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
    }
    });
    }
        } 
    
    }









      

  • 相关阅读:
    Warning: $HADOOP_HOME is deprecated解决方法
    配置hadoop-1.2.1 eclipse开发环境
    Retinex图像增强算法代码
    XML 处理利器 : XStream
    #一周五# win10通用平台,无处不在的Xamarin,msbuild开源,MVP卢建晖的Asp.NET 5系列 (视频)
    javascript两种声明函数的方式的一次深入解析
    Spring AOP (二)
    Spring AOP (一)
    如何成为Android高手
    模拟 POJ 2993 Emag eht htiw Em Pleh
  • 原文地址:https://www.cnblogs.com/syeacfpl/p/13724574.html
Copyright © 2011-2022 走看看