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

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

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

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

1. css

			<!--这是一个elementui选择器select 选择不同的产品 我这里只用两款-->
				<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
          }
        })
      }
}

这里更更换的就是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了 两种方法都可以使用啦 看君喜欢