先展示效果:注意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中如何将数据传递到下一个页面(超级简单哒)的更多相关文章

  1. React中父子组件数据传递

    Vue.js中父子组件数据传递:Props Down ,  Events Up Angular中父子组件数据传递:Props Down,  Events  Up React中父子组件数据传递:Prop ...

  2. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  3. 在Vue中由后台数据循环生成多选框CheckBox时的注意事项

    多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...

  4. spring 默认情况下事务是惟一的 同一个方法里面第一个sql开启后 在执行完 将事务传递给下一个sql

    spring 默认情况下事务是惟一的 同一个方法里面第一个sql开启后 在执行完 将事务传递给下一个sql

  5. request设置属性 一般当做下一个页面的结果集

    request设置属性 一般当做下一个页面的结果集

  6. vue再次入手(数据传递①)

    准备 之前使用vue.js完成一个项目之后,对其还是充满着无限兴趣,于是不妨利用碎片时间再次研究一下这个“令人着迷”的js框架. 1.新建一个基于vue的项目,具体方法不再赘述,请看这里:http:/ ...

  7. vue再次入手(数据传递②)

    接上篇~ 5.最后一种,互通:无所谓父组件或者是子组件,而是随时随地都能调用到数据的一种方法.便是利用vuex来管理数据,官网描述: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它 ...

  8. Java WEB中的HttpServletResponse数据传递

    1.什么是HttpServletResponse 2.使用HttpServletResponse向浏览器发送数据及相关实例. 实例1:实现文件下载功能 实例2:实现验证码注册 实例3:实现页面3秒后跳 ...

  9. Vue组件注册与数据传递

    父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件child var child = Vue.extend({ template: '<div>这是 ...

随机推荐

  1. 虚拟化技术及ip netns简介

    虚拟化技术: Iass:infrastructure as a server 直接启动一个虚拟机,需要什么程序自己安装 Paas:platform as a servicce 启动一个虚拟机,并安装了 ...

  2. html5--2.1新的布局元素(1)-header/footer

    html5--2.1新的布局元素(1)-header/footer 学习要点 了解header/footer的语义和用法 使用header/footer进行一个简单的布局 header元素(标签) 用 ...

  3. ACM学习历程—HDU 1059 Dividing(dp && 多重背包)

    Description Marsha and Bill own a collection of marbles. They want to split the collection among the ...

  4. 【Lintcode】119.Edit Distance

    题目: Given two words word1 and word2, find the minimum number of steps required to convert word1 to w ...

  5. HL7 Event Type

    Table 0003 - Event type Value Description A01 ADT/ACK - Admit / visit notification A02 ADT/ACK - Tra ...

  6. Windows WMIC命令使用详解1

    https://blog.csdn.net/enweitech/article/details/51982114 在CMD和Powershell中 使用WMIC 先决条件: a. 启动Windows ...

  7. David Malan teaching CS75 lecture 9, Scalability

    https://youtu.be/-W9F__D3oY4 Storage PATA, SATA, SAS (15,000 rpm), SSD, RAID0 : striping, double thr ...

  8. 《SpringBoot揭秘 快速构建微服务体系》读后感(五)

    应用日志和spring-boot-starter-logging 快速web应用开发与spring-boot-starter-web 1.项目结构层面的约定

  9. 算法java实现--回溯法--图的m着色问题

    (转自:http://blog.csdn.net/lican19911221/article/details/26264471) 图的m着色问题的Java实现(回溯法) 具体问题描述以及C/C++实现 ...

  10. c程序十六进制字符串转换为整数与反转

    字符串转整数使用sscanf ; char *buf = "1d5ce"; sscanf (buf, "%x", &value); printf (&q ...