vue项目中点击商品跳转详情页
路由配置path: "/detail/:goods_id",component: () => import("../views/detail/detail.vue")配置详情页<!-- detail --><template><div class="detail"><!-- 详情页轮播 mint-ui --><div class="swi
·
路由配置
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>
更多推荐
已为社区贡献3条内容
所有评论(0)