礼物帮手项目（3） - 传id跳转详情页（尝试2种方法）

传id跳转详情页 https://blog.csdn.net/boysky0015/article/details/78256113?utm_source=blogxgwz3

// 点击列表页面的每一项时，跳到对应的详情页面
jingxuandetail (index) {
let id = this.jingxuandata[index].id
console.log(id)
this.$router.push(‘/jxdetail/${id}`)
}

下一个详情页 接收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)
      })

打印所有数据

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)
 })

打印点击的id

这里看一下后台

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
    })
  })
})

数据库


先把前端的id传到后端看看

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

这个query和body里面没有id

咦，找了一下发现id放到了params里面

那么我认为这样携带过去的id要用req.query接收

id在后台接收打印出来

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

检查一下接口


感觉这里应该是访问不到items里面的内容的

=====

sessionStorage把当前页面点击的那个内容传过去，在另一个页面打印，渲染到页面

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
    }

这样的的话是把数据传过去了，又一个新问题


内容没有显示出来，不知道怎么办了。