vant/vue ——列表跳转到指定详情页获取数据的方法

在原有的列表项中添加点击事件

 新建一个路由页面（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);
      });
    },