vue当前（路由）页面跳转当前（路由）页面，刷新数据

墨蓝 2021-08-30 22:34 850阅读 0赞

最近呢 总是踩坑 就是那种今天我写了代码 但是吧一直报错 然后明天再写就对了 =。=

咱也不知道是为啥 咱也不知道是咋回事 只能说萌新小白在线吃菜

言归正传 最近写了一个商品详情页 在当前商品详情页 还可以跳到另一个商品的详情页 也就是改变参数 当前路由跳当前路由

下面写了两种方法 有一种是我同事louis交给我的

## 1. css ##

<div class="btn">  
                        <el-select
                          v-model="value"
                          placeholder="请选择款式"
                          class="select"
                          @change="selectChange(value)"
                          @visible-change="ShowSelect()"
                          :class="[isShowSelect == true ? 'isColor' : '']"
                        >
                          <el-option
                            v-for="item in Typeoptions"
                            :key="item.product_sku_id"
                            :label="item.color_name"
                            :value="item.product_sku_id"
                          >
                          </el-option>
                        </el-select>
                      </div>

## 2.js ##

1.有效数据  
Typeoptions是从后台接口获取的数据

export default { 
    	data(){ 
    		return{ 
    			Typeoptions: [
    	        { 
    	          	product_sku_id: 149,
    				color: "#272526",
    				color_name: "典雅黑"
    	        },
    	        { 
    	          	product_sku_id: 143,
    				color: "#6D6D6F",
    				color_name: "太空灰"
    	        }
    	      ],
    	      value: "",
    	      SkuID ："", //商品的skuid  会随着款式改变
    	      Pro_id"", //商品的id  不会改变
    		}
    	}
    }

2.方法

methods：{ 
    selectChange(value) { 
          // console.log("value", value); value是选中值的id  也就是product_sku_id
          this.SkuID = value;
          //当前详情页跳转详情页的方法  两种方法
          //方法一 打开一个新窗口 在本页面
    
          // if (this.SkuID == this.$route.query.sku_id) { 
          //当SkuID 与浏览器路径的参数是一致的时候  同一款商品 不需要跳转
          //   return;
          // } else { 
          //   if (this.$route.query.sku_id) { 
          //     let result = window.location.href.split("&sku_id");
          //     let url = result[0] + "&" + "sku_id=" + value;
    	  //     在本页面打开我们拼接的路径
          //     window.open(url, "_self");
          //   } else { 
          //     let url = window.location.href + "&" + "sku_id=" + value;
    
          //     window.open(url, "_self");
          //   }
          // }
    
        //方法二 跳转到当前路由  但是要做判断 获取当前路由id
         
          console.log(this.$route.query.sku_id,this.SkuID)
          if(this.$route.query.sku_id == this.SkuID){ 
            return
          }else{ 
            this.$router.push({ 
              path:'/shopDetail', // 当前页面路由
              query:{ 
                product_id: this.Pro_id,  //商品id
                sku_id: this.SkuID
              }
            })
          }
    }

![在这里插入图片描述][20200611135307752.png]

![在这里插入图片描述][20200611135347299.png]  
这里更更换的就是sku\_id的值

还要在页面初始加载的时候获取当前路由的参数 才能够与选中的参数做比对

created() { 
        console.log(this.$route.query)
        this.SkuID = this.$route.query.sku_id;
        this.Pro_id = this.$route.query.product_id;
        this.getProduct();  //页面初始加载的时候请求的页面数据
      },

监听路由 当参数发生改变的时候 重新获取数据呀

watch: { 
        $route(to, from) { 
          //监听相同路由下参数变化的时候，从而实现异步刷新
          this.loading = true;
          //重新获取数据
          this.getProduct();
        }
      },

这样就ok了 两种方法都可以使用啦 看君喜欢

[20200611135307752.png]: /images/20210813/13af135c283f4c76aca3cea70b76964f.png
[20200611135347299.png]: /images/20210813/cd0a735279a64a3ebb99e1098cc385dd.png