current position:Home>Vant / Vue -- the method of jumping to the specified detail page in the list to obtain data

Vant / Vue -- the method of jumping to the specified detail page in the list to obtain data

2022-01-27 01:23:22 Nanchen_ forty-two

Add click event to the original list item

  Create a new routing page (detail.vue) And configure the path

stay Add a method to a page with a list , And pass this.$router.push Pass on the reference

 navClick(index) {
      this.$router.push({
        path: "/detail",
        query: {
          detail: JSON.stringify(this.list[index]),
        },
      });
    },

Because of the above this.list[index] Is an array , It cannot be used directly . So we need to convert it into the form of string

After that, in the new Detail.vue( That is, the details page to get the parameters in the list page )

    file() {
      return this.$route.query.detail;
    },

Then you can render it to see if the imported parameters are successful

 

After success, you have to write. Each click should jump to the interface of the corresponding page

  data() {
    return {
      conn: {},
    };
  },
  mounted() {
    this.ddetail();
  },
file(){
 //   return this.$route.query.detail;
     var con = JSON.parse(this.$route.query.detail)
     return this.conn = con
}

  Create a method ddetail() 

Because it's based on id To get the corresponding page , So here we need to convert the obtained parameters into objects , And use an empty object conn Receive , After that, you can directly transfer the parameters passed in by the empty object id The data of the corresponding page can be successfully obtained by putting the value in the request !

    ddetail() {
      this.$axios.get(`/goods/${this.conn.id}`).then((v) => {
        console.log(v);
      });
    },

 

copyright notice
author[Nanchen_ forty-two],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270123196639.html

Random recommended