礼物帮手项目（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/router.push(`/jxdetail/router.push(‘/jxdetail/{id}`)
}

下一个详情页接收id

var id = this.$route.params.idvar that = thisconst 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].idconsole.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 = itemObjconsole.log(this.jingxuandata)},

router

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

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

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

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

vue项目实现从商品列表页跳转详情页后，返回列表页保持页面在原位置，且列表页刷新的方法
vue项目实现从商品列表页跳转详情页后,返回列表页保持页面在原位置,且列表页刷新的方法页面跳转后回退保持原位置 App.vue页面中使用keep-alive缓存组件 <template> ...
vue项目keepAlive保持页面状态（详情页返回列表页不刷新）
vue项目keepAlive保持页面状态(详情页返回列表页不刷新) 在vue项目中,存在从列表页跳转到详情页查看,而后又返回列表页的操作时,如果列表过长,我们往往希望从详情页返回列表页时,列表页能留在 ...
多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...
在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title ...
用户ID生成唯一邀请码的几种方法
文章目录 1.需求描述 2.需求分析 3.字符集 4.方法一:随机数+唯一性判断(不可逆) 5.方法二:Hash+唯一性判断(不可逆) 6.方法三:进制法(可逆) 7.方法四:进制法+扩散.混淆(可逆 ...
微服务商城系统实战后台管理页面、商家管理页面、商品列表跳转详情页
文章目录一.后台管理 1.根据点击的 div 展示相应页面 2.解决 height: 100% 不起作用问题 3. th:onclick 引用的函数参数是 model值二.商家管理 1.th:ea ...
微信小程序实现商品列表跳转详情页
实验要求模仿京东小程序,实现下列功能首页包含了手机图片,手机的描述,手机的价格,购物车图标首页显示两行文字,多余的文字隐藏,以3个点代替点击页面不同的地方,能够跳转到不同的手机详情页面手机详 ...
Python 项目依赖包第三方库生成requirements.txt的两种方法
python项目如何在另一个环境上重新构建项目所需要的运行环境依赖包? 使用的时候边记载是个很麻烦的事情,总会出现遗漏的包的问题,这个时候手动安装也很麻烦,不能确定代码报错的需要安装的包是什么版本.这 ...
织梦手机端跳转到index.html,两种方法实现织梦自带手机端搜索页直接跳转到search_m.htm手机站页面...
这篇文章主要为大家详细介绍了两种方法实现织梦自带手机端搜索页直接跳转到search_m.htm手机站页面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 用过织梦 ...
人工智能项目筹集不到_为游戏筹集资金的三种方法
人工智能项目筹集不到 Creating a game is no easy task, but most people who undertake this mission are motivate ...
微信小程序（四）：通过list列表跳转详情页
1.难点:怎么知道用户点击的是list中的哪一条数据? 方法一:在template外for循环里通过for循环的index获取将index赋值到data-studentId,data-后面的变量名是 ...

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

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

最新文章

热门文章