先展示效果:注意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. interceptors

    <mvc:interceptors> <mvc:interceptor> <mvc:mapping path="/**"/> <bean ...

  2. ActiveMQ之发布、订阅使用

    maven依赖 <dependencies> <dependency> <groupId>org.apache.activemq</groupId> & ...

  3. XXL-Job集群

    底层已经实现好了 调度中心集群 调度中心支持集群部署,提升调度系统容灾和可用性. 调度中心集群部署时,几点要求和建议: DB配置保持一致: 登陆账号配置保持一致: 群机器时钟保持一致(单机集群忽视): ...

  4. ps炫光素材

    炫光闪电笔刷,炫光闪电笔刷,雷电笔刷,自然闪电Photoshop笔刷下载ps炫光素材 素材下载:http://www.huiyi8.com/sc/8695.html

  5. RQNOJ 624 运动鞋:dp

    题目链接:https://www.rqnoj.cn/problem/624 题意: 小明有奖学金啦!所以他要去买运动鞋. 总共有n款鞋,分别属于t个品牌. 每款鞋的价格为c[i],在小明心目中的价值为 ...

  6. Sed在匹配行前后加入一行

    a 追加内容 sed ‘/匹配词/a\要加入的内容’ example.file(将内容追加到匹配的目标行的下一行位置)i 插入内容 sed ‘/匹配词/i\要加入的内容’ example.file 将 ...

  7. BZOJ_1119_[POI2009]SLO_置换+贪心

    BZOJ_1119_[POI2009]SLO_置换+贪心 Description 对于一个1-N的排列(ai),每次你可以交换两个数ax与ay(x<>y),代价为W(ax)+W(ay) 若 ...

  8. Codefroces 762A k-th divisor 数论

    Codeforces 762A 题目大意: 给定两个正整数n,k\((n \le 10^{15},k\leq10^9)\),求n的从小到大的第k个约数,无解输出-1 分析: 我们会自然而然地想到找出n ...

  9. ZigBee自组网地址分配与路由协议概述

    1. ZigBee简介 ZigBee是基于IEEE802.15.4标准的低功耗局域网协议.根据国际标准规定,ZigBee技术是一种短距离.低功耗的无线通信技术. ZigBee协议从下到上分别为物理层( ...

  10. undefined reference to `pthread_create' collect2: ld returned 1 exit status

    问题原因:    pthread 库不是 Linux 系统默认的库,连接时需要使用静态库 libpthread.a,所以在使用pthread_create()创建线程,以及调用 pthread_atf ...