vue点击跳转到详情页

1商品组件页面GoodsInfo.vue(点击该组件跳转到详情页)

   <template>
      <div class="goods-info" @click="goGoodsPage()">
        <div class="goods-image">
          <img v-lazy="goodsImage">
        </div>
        <div class="goods-name">{{goodsName}}</div>
        <div class="goods-price">￥{{ goodsPrice.toFixed(2) }}</div>
      </div>
    </template>
    
    <script>
    export default {
      name: "goodsInfo",
      // 首页传过来的
      props: ["goodsImage", "goodsName", "goodsPrice", "goodsId"],
      data() {
        return {};
      },
      methods: {
        goGoodsPage() {
          // 跳转到Goods.vue商品详情页面,name为Goods.vue页面路由配置里的的name属性
          this.$router.push({name:"goods",query:{goodsId:this.goodsId}})
        }
      }
    };
    </script>
    
    <style lang="scss" scoped>
    .goods-info {
      padding-bottom: 0.2rem;
      .goods-image {
          text-align: center;
          img{
              width: 95%;vertical-align: middle;
          }
      }
      .goods-name {
        padding: 0 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .goods-price {
        text-align: center;
        color: #e5017d;
      }
    }
    </style>

2商品详情页面Goods.vue(接收商品组件页面GoodsInfo.vue传过来的goodsId)

<template>
  <div>商品详情页</div>
</template>

<script>
import url from "@/urlApi.js";
export default {
  name: "goods",
  data() {
    return {
      goodsId: ""
    };
  },
  created () {
      // 接收GoodsInfo.vue传过来的goodsId
      this.goodsId = this.$route.query.goodsId
      console.log(this.goodsId)
      this.getGoodsInfo();
  },
  methods: {
    getGoodsInfo() {
      let that = this;
      this.$http
        .post(url.getDetailGoodsInfo,{goodsId: that.goodsId})
        .then(response => {
            //根据goodsId获取对应的商品详情信息
            console.log(response)
        })
        .catch(error => {

        });
    }
  }
};
</script>

<style lang="scss" scoped>
</style