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>这是 ...
随机推荐
- Android Studio 主题、字体大小的设置
1. Android Studio 主题的设置: 设置Android Studio 自带的主题 设置第三方主题 2. Android Studio 字体的设置 设置左面包名的字体大小 设置右面代码编辑 ...
- openfire XML流
XML流 概览 两个基本概念,XML流和XML节,使得在出席信息已知的实体之间,异步交换低负载的结构化信息成为可能.这两个术语定义如下: XML流的定义:一个XML流是一个容器,包含了两个实体之间通过 ...
- Java_Path_01_路径问题
二.参考资料 1.java 路径问题 2.Java路径问题最终解决方案—可定位所有资源的相对路径寻址 3.Java获取文件的路径 4.Thread.currentThread().getContext ...
- codeforces 659A A. Round House(水题)
题目链接: A. Round House time limit per test 1 second memory limit per test 256 megabytes input standard ...
- TF-IFD算法及python实现关键字提取
TF-IDF算法: TF:词频(Term Frequency),即在分词后,某一个词在文档中出现的频率. IDF:逆文档频率(Inverse Document Frequency).在词频的基础上给每 ...
- xpath normalize-sapce 函数的Java实现
normalize-space函数实现的功能是:删除字符串前后空格,中间的空格有多个只保留一个. 1. 用Java正则表达式 public static String normalizeSpace(S ...
- [转载]IOCP模型的总结
原文:IOCP模型的总结 IOCP(I/O Completion Port,I/O完成端口)是性能最好的一种I/O模型.它是应用程序使用线程池处理异步I/O请求的一种机制.在处理多个并发的异步I/O请 ...
- hive通过spark导入hbase
发现采用shcjar的话,总是执行到某个点就停止了 于是我打算尝试一下直接说哦用org.apache.hadoop.hbase.spark这个datasource看看 确实不行,即使没有createt ...
- snmp++开发实例一
1.官网下载 snmp开发,首先需要机器已经安装了snmp服务,这方面的资料网上比较完备,安装的时候注意每少一个文件,网上都可以下载到,这样可以自己形成一个包,供以后使用.只要最后snmp的服务开启就 ...
- C语言单精度浮点型转换算法
文章来源:http://blog.csdn.NET/educast/article/details/8522818 感谢原作者. 关于16进制浮点数对于大小为32-bit的浮点数(32-bit为单精度 ...