购物商城实现点击商品列表某商品,进入其详情页!

一、实现思路

1.如何实现列表页面商品点击进入详情页面。

首先我们需要把这个商品的id带给他。

 methods: {gotolink(id) {this.$router.push({path: '/Detailed/',query: {id: Number.prototype.toString.call(id)}});}}

在商品详情页拼接一下

created() {let _that = this;this.productId = this.$route.query.id;API.post('http://10.70.39.180:9000/app/product/productDetail/' + this.productId).then(res => {// console.log(res);_that.detailData = res.data;console.log('detailData', this.detailData);});},

这样点击该商品就能进入到对应的商品的详情。

二、用到的方法讲解

1.Number.prototype.toString.call(id)

2.this.$route.query.id

使用该方法的时候传参数:

传参数:这是我们在商品List页面做的事情,

this.$router.push({path: '/trading',query:{id:id,}
})

获取参数:这是我们在Detailed详情页面做的事情。

this.$route.query.id

url表现形式:

 http://localhost:8090/#/trading?id=1

页面之间用路由跳转传参时,刷新跳转后传参的页面,数据还会显示存在

3.this.$route.params.id

使用该方法的时候传参数

this.$router.push({name: 'trading',params:{id:id,}
})

使用该方法的时候获取参数

this.$route.params.id

url的表现形式(url中不带参数)

http://localhost:8090/#/trading

 页面之间用路由跳转传参时,刷新跳转后传参的页面,数据不存在

方法二、

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/65748.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何生成api接口获取宝贝商品详情,商品详情接口,产品详情

API (Application Programming Interface)是指应用程序接口,它是一种通过编写一组统一的规则,开发一个软件来与其他应用程序进行通讯的技术。API可以方便应用程序之间的交流和数据共享,以及增强应用程序的功能。 在现代应用程序中&#xff0…

lazada商品详情采集接口 商品列表接口 商品数据获取 测试实例分享

Lazada(来赞达),东南亚地区最大的在线购物网站之一。获得德国创业孵化器RocketInternet桑威尔兄弟(SamwerBrothers)支持,Lazada的目标主要是印尼、马来西亚、菲律宾以及泰国用户。 item_get-获得lazada商品详情 这次尝试通过API…

新版开运网运势测算网站源码 支持微信/支付宝H5支付 支持分销代理 可封装APP

源码介绍 我在外面花钱购买的某站VIP资源,就是那种搬砖站,买来没时间调试发给大家看看吧,喜欢的就下去玩玩! 支持微信/支付宝H5和电脑端扫码支付、手机端可以调起微信/支付宝应用支付 支持后台设置价格、后台设置支付接口信息 支持…

爬取星座运势数据并进行词频分析

试着自己做了下爬虫,从星座屋网站爬取十二星座30天的运势数据。 import requests from bs4 import BeautifulSoup import pandas as pd#获取12星座的网址 urllhttp://www.xzw.com rrequests.get(urlhttp://www.xzw.com/fortune/aries/) soupBeautifulSoup(r.text,l…

今天应该去买彩票的~

刚刚CSDN Blog登录,验证码居然是88888,特开一帖,以作纪念~

体彩 超级大乐透(C++) 测测你的中奖概率

随机购买n注彩票,或者手动输入彩票数字,看看你的幸运值如何? 对体彩超级大乐透的前区5个数字和后区2个数字进行区分,前区(1-35),后区(1-12),避免错误输入&…

彩票中奖率的真相:用 JavaScript 看透彩票背后的随机算法

原本这篇文章是打算叫「假如我是彩票系统开发者」,但细想一下,如果在文章中引用太多的 JavaScript 的话,反而不是那么纯粹,毕竟也只是我的一厢情愿,彩票开发也不全如本文所讲,有所误导的话便也是得不偿失了…

彩票中奖概率计算过程

周六周末无聊,想着买彩票,万一中奖了就不用上班啦,哈哈。所以就计算了一下中奖概率。 中奖规则: 一等奖:投注号码与当期开奖号码全部相同(顺序不限,下同),即中奖&#…

使用 ChatGPT 进行研究的先进技术

在这篇文章中,您将探索改进您研究的先进技术。尤其, 分析和解释研究数据进行文献综述并找出研究差距废话不多说直接开始吧!!! 分析和解释研究数据 一家小企业主希望分析客户满意度数据以改善客户服务。他们使用包含 10…

认真聊聊中断(软中断)

文章目录 软中断与硬中断很像软中断的守护进程注册软中断向量表触发一次软中断总结 前面认认真真聊聊中断,其实讲的都是硬中断,注意是硬中断不是硬件中断哦,硬中断的概念更大。 硬中断包括中断、异常以及 INT 指令这种软件中断,整…

免费织梦wap手机网站模板下载

模板名称: 织梦蓝色通用企业wap手机网站源码 模板介绍: 织梦最新内核开发的手机模板,该模板可以用来做企业手机wap站,及企业微信营销浏览展示; 色调及排版都属通用类型,一般的企业均可以使用该模板做手…

5套独立的app手机端模板界面代码

MobioKit是移动手机端HTML模板,可以很容易创建手机网站布局设计,或者移动App应用。创意设计和神奇的特性将在让你完美的移动项目独一无二的。这个移动端UI工具包包含所有必要的设计,可以创建移动商店,个移动社交应用,移动健康应用,业务相关的移动应用程序等。 5套独…

简洁新颖风格Emlog模板程序源码

正文: 简洁模板程序源码Emlog内核,模板的样子也是非常新颖简洁的,并且完美兼容EMLOG5.3.1程序版本,需配合模板设置插件进行使用。 使用方法: 首先需要安装好EMlog系统和模板设置插件,登录后台直接上传模板应用即可。…

dedecms织梦实现url不变电脑和手机显示不同模板

1、只需要电脑站是伪静态就行了,其他伪静态教程也行,只要电脑站是伪静态就行了 2、打开 /include/extend.func.php 在最下面加入一个方法 /*** 判断是否为移动设备访问* return bool*/ function isMobile() {if (isset($_SERVER[HTTP_X_WAP_PROFILE])) …

最新娱乐网纯净无后门emlog模板源码带手机版,会员中心

介绍: 该模板是之前芒果娱乐网自用源码,无毒无后门,放心使用! 带手机版,会员中心! 安装方法 1.将源码上传好,导入数据库, 2.找到config.php文件,将数据库配置改成你自己…

织梦制作单页面模板的2种方法

在用dedecms织梦程序制作企业模板时需要用到公司介绍、联系我们、关于我们等相关单页面,可织梦dedecms不像wordpress或其它程序单独提供有页面功能,可以直接新建页面。不过织梦dedecms提供了栏目内容的调用功能,可以让织梦站长通过创建栏目实…

给大家分享下织梦网站模板

最近需要用到一个官网模板,作为一个后台程序员来说写前端和专业的差了远了,所以想找个模板学习下,可是我这面是一顿搜一顿找找了好多都快绝望了因为都不是免费下载的不过最终还是找到了,在这里分享给大家 模板一 红色大气响应式重…

织梦dedecms资源素材教程下载网站模板源码(带手机移动端)附安装教程

织梦dedecms资源素材教程下载网站模板(带手机移动端) 1.把文件上传到你的站点的根目录,然后运行 http://你的域名/install/index.php 安装,根据提示填写好相关信息,点“下一步”...即可完成安装。(注:若提示无法安装,…

织梦高端婚纱摄影网站织梦模板(带手机端

模板介绍: 织梦最新内核开发的模板,该模板属于营销型企业通用类、婚纱摄影、婚纱拍摄类企业都可使用, 这款模板使用范围极广,不仅仅局限于一类型的企业,你只需要把图片和产品内容; 换成你的,颜…

安装织梦V5.7手机模板文本教程

备份数据库&#xff0c;&#xff0c;备份文件回本地&#xff0c;&#xff0c;开始&#xff01; 在线更新织梦新版本&#xff1a; 更新时有一点需要注意&#xff1a; 如果&#xff0c;模板默认风格如果是默认的default 则需要改成别的。否则直接更新会覆盖原来的模板文件。<一…