vue项目中点击商品跳转详情页

路由配置

path: "/detail/:goods_id",
        component: () => import("../views/detail/detail.vue")

配置详情页

<!-- detail -->
<template>
  <div class="detail">
    <!-- 详情页轮播 mint-ui -->
    <div class="swipe">
      <mt-swipe :auto="0">
        <mt-swipe-item v-for="killlists in killlistdata" :key="killlists.id">
          <img :src="killlists.src" alt="" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from 《组件路径》;
import { killlist } from "@/data/home.json";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      killlist: killlist,
      goods_id:0,
    };
  },
  //监听属性 类似于data概念
  computed: {
    killlistdata() {
      return this.killlist.filter(item => {
        //   过滤出与good_id相等
        return item.id == this.goods_id;
      });
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  mounted() {
        // console.log(this.$route.params.goods_id);
    this.goods_id = this.$route.params.goods_id;
    // console.log(document.documentElement.clientHeight);
     this.killlist.filter(item => {
      return item.id == this.goods_id;
    });
    // this.obj = arr[0];
  
  },
  destroyed() {}, //生命周期 - 销毁完成
};
</script>
<style lang=less>
.swipe {
  width: 37.5rem;
  height: 37.5rem;
  img {
    width: 37.5rem;
    height: 37.5rem;
  }
}
</style>