Vue中如何将数据传递到下一个页面(超级简单哒)
先展示效果:注意URL中值是有变化的

一:在goodslist.vue文件夹绑定
<router-link :to="'/goodsinfo/'+subitem.artID" class="">
<div class="img-box">
<img v-lazy="subitem.img_url">
</div>
<div class="info">
<h3>{{subitem.artTitle}}</h3>
<p class="price">
<b>{{subitem.sell_price}}</b>元</p>
<p>
<strong>库存 {{subitem.stock_quantity}}</strong>
<span>市场价:
<s>{{subitem.market_price}}</s>
</span>
</p>
</div>
</router-link>
三:在下一个页面 goodsinfo.vue写入
getGoodsInfoData() {
const url = `site/goods/getgoodsinfo/${this.$route.params.goodsId}`
this.$axios.get(url).then(res => {
this.goods = res.data.message
}, err => {
console.log(err)
})
},
四:在main.js中 即可
const router = new VueRouter({
routes: [{
path: '/',
redirect: '/goodslist'
},
{
path: '/goodslist',
component: goodslist
},
{
path: '/goodsinfo/:goodsId',
component: goodsinfo
},
{
path: '/shopcart',
component: shopcart
}
]
})
Vue中如何将数据传递到下一个页面(超级简单哒)的更多相关文章
- React中父子组件数据传递
Vue.js中父子组件数据传递:Props Down , Events Up Angular中父子组件数据传递:Props Down, Events Up React中父子组件数据传递:Prop ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
- 在Vue中由后台数据循环生成多选框CheckBox时的注意事项
多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...
- spring 默认情况下事务是惟一的 同一个方法里面第一个sql开启后 在执行完 将事务传递给下一个sql
spring 默认情况下事务是惟一的 同一个方法里面第一个sql开启后 在执行完 将事务传递给下一个sql
- request设置属性 一般当做下一个页面的结果集
request设置属性 一般当做下一个页面的结果集
- vue再次入手(数据传递①)
准备 之前使用vue.js完成一个项目之后,对其还是充满着无限兴趣,于是不妨利用碎片时间再次研究一下这个“令人着迷”的js框架. 1.新建一个基于vue的项目,具体方法不再赘述,请看这里:http:/ ...
- vue再次入手(数据传递②)
接上篇~ 5.最后一种,互通:无所谓父组件或者是子组件,而是随时随地都能调用到数据的一种方法.便是利用vuex来管理数据,官网描述: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它 ...
- Java WEB中的HttpServletResponse数据传递
1.什么是HttpServletResponse 2.使用HttpServletResponse向浏览器发送数据及相关实例. 实例1:实现文件下载功能 实例2:实现验证码注册 实例3:实现页面3秒后跳 ...
- Vue组件注册与数据传递
父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件child var child = Vue.extend({ template: '<div>这是 ...
随机推荐
- haproxysocket 参数记录
haproxy的一些指标 pxname 组名 svname 服务器名 qcur 当前队列 qmax 最大队列 scur当前会话用户 smax最大会话用户 slim会话限制 stot会话 ...
- Starting MySQL.. ERROR! The server quit without updating PID file
版权声明:本文为博主原创文章,未经博主允许不得转载. 注意:本文出自 “阿飞”的博客 ,如果要转载本文章,请与作者联系! 并注明来源: http://blog.csdn.net/faye0412/ar ...
- Matlab之rand(), randn(), randi()函数的使用方法
1. rand()函数用于生成取值在(0~1)之间均匀分布的伪随机数.rand(n):生成n*n的0~1之间的满足均匀分布的伪随机矩阵:rand(m,n):生成m*n的伪随机数:rand(m,n,' ...
- [干货]兼容HTML5的Placeholder属性-更新版v0.10102013
HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等.Placeholder是HTML5新增的另一个属性,当input或者textarea设置了 ...
- blog集合
godiscoder的技术blog 一个不错的技术架构设计blog MySQLOPS 数据库与运维自动化技术分享 stone的技术blog 陈皓专栏 风雪涟漪的技术blog 华为首席科学家 张宴技术b ...
- 001-Bootstrap栅格系统
1 安装和基本使用 外文官网 中文官网 可以正常下载使用 有三个文件夹, 分别是css, fonts, js bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── ...
- 机器视觉 之 Gabor Feature
在机器视觉中,gabor feature是一种比较常见的特征,因为其可以很好地模拟人类的视觉冲击响应而被广泛应用于图像处理, gabor feature 一般是通过对图像与gabor filter做卷 ...
- Java 的序列化Serializable接口介绍及应用
常看到类中有一串很长的 如 private static final long serialVersionUID = -4667619549931154146L;的数字声明.这些其实是对此类进行序列化 ...
- MySQL-计算7月重新激活客户第二种方法_20161022
上周日休假去广西玩了一周,回来继续. (一)上次用的是取当月首单日期,往前推30天 代码比较繁琐 这次方法是借助变量 错行进行判断 一个用户上次最后一次下单时间和下次下单时间的时间差 也就是形成一个相 ...
- <十八>UML核心视图动态视图之协作图
一:协作图 --->描述了对象间交互的一种模式.它通过对象之间的连接和它们相互发送的消息来显示参与交互的对象 --->协作图可以有对象和主角实例,以及描述它们之间关系和交互的连接和消息.通 ...