在原有的列表项中添加点击事件
新建一个路由页面(detail.vue)并配置好路径
在 有列表的页面中添加方法,并通过this.$router.push进行传参
navClick(index) { this.$router.push({ path: "/detail", query: { detail: JSON.stringify(this.list[index]), }, }); },
因为上面的this.list[index]为数组,不能直接拿来使用。所以要把它转换成字符串的形式
之后在新建的Detail.vue(也就是详情页来获取列表页面中的参数)
file() { return this.$route.query.detail; },
然后可以渲染一下查看有没有导入参数成功
获取成功后就要去写每次点击应该跳转到对应页面的接口
data() { return { conn: {}, }; }, mounted() { this.ddetail(); }, file(){ // return this.$route.query.detail; var con = JSON.parse(this.$route.query.detail) return this.conn = con }
创建一个方法ddetail()
因为是根据id来获取对应的页面,所以这里要把得到的参数转换成对象,并且用一个空对象conn进行接收,之后就可以直接将空对象传进来的参数的id值放在请求中即可成功获取对应页面的数据!
ddetail() { this.$axios.get(`/goods/${this.conn.id}`).then((v) => { console.log(v); }); },