Gift Helper Project (3)-Pass id to jump to the details page (try 2 methods)

Pass id to jump to the details page https://blog.csdn.net/boysky0015/article/details/78256113?utm_source=blogxgwz3

// When clicking each item on the list page, jump to the corresponding detail page
jingxuandetail (index) { let id = this.jingxuandata[index].id console.log(id) this. router. push ('/ jxdetail / router.push(`/jxdetail/


$router.push(‘/jxdetail/${id}`)
}

Next detail page receiving id

var id = this.$route.params.id
    var that = this
    const url = `/api/jingxuan/${id}`
    that.axios.get(url)
      .then((res) => {
        console.log(url)
        console.log(res.data)
      })

Print all data

this.axios.get('/api/jingxuan').then((res) => {
   console.log(res)
   console.log(res.data.jingxuans[0].data.items)
   this.jingxuandata = res.data.jingxuans[0].data.items
 }, function (err) {
   console.log(err)
 })

Print the clicked id

here to see the background

router.get('/api/jingxuan/:id', function (req, res, next) {
  //查找所有数据
  var id = req.body.id;
  // var id = req.params.id;
  console.log(id);

  db.jingxuanModel.findOne({
    'data.items.id': 'id'
  }, function (err, result) {
    if (err) {
      res.json({
        code: 201,
        message: '访问数据出错'
      });
      return;
    }
    res.json({
      code: 200,
      message: '成功',
      jingxuans: result
    })
  })
})

Database


first pass the front-end id to the back-end to see

var id = req.params.id;
  console.log(id);

There is no id in this query and body. I

found that id is put in params.

Then I think that carrying the id in the past should use req.query to receive the

id and print it out in the background.

var id = req.params.id;
  console.log(id);

Check the interface, I


feel that the content in items should not be accessible here

=====

sessionStorage passes the content clicked on the current page, prints it on another page, and renders it to the page

jingxuandetail (item, index) {
 sessionStorage.setItem('itemJson', JSON.stringify(item))
  let id = this.jingxuandata[index].id
  console.log(id)
  this.$router.push(`/jxdetail/${id}`)
}

<img :src="jingxuandata.cover_image_url"
           width="100%">
      <h3>{
   
   {jingxuandata.title}}</h3>

data () {
    return {
      jingxuandata: {}
    }
  },
  created () {
    var itemJson = sessionStorage.getItem('itemJson')
    var itemObj = JSON.parse(itemJson)
    // itemObj.allitemThumbsUrl = itemObj.itemUrlThumbs.split('|')
    this.jingxuandata = itemObj
    console.log(this.jingxuandata)
  },

router

{
      path: '/jxdetail/:id',
      // path: '/posts/:id/content',
      name: 'jxdetail',
      component: Jxdetail
    }

In this case, the data is passed, and another new question


is not displayed. I don't know what to do.