先展示效果:注意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. javascript(5)

    (1)数组的细节: 基本用法 var 数组名=[元素值,元素值...]; 元素的值可以是任意类型. 数组是引用类型. js里的引用. 在函数参数列表中,如果传入的是基本类型,那 按值传递.如果传入的是 ...

  2. IDEAL葵花宝典:java代码开发规范插件 Rainbow Brackets 插件

    前言: 最近在Jetbrains IDEA插件网站逛发现了 Rainbow Brackets这款插件,非常棒,推荐给大家. 可以实现配对括号相同颜色,并且实现选中区域代码高亮的功能. 对增强写代码的有 ...

  3. codeforces 703D D. Mishka and Interesting sum(树状数组)

    题目链接: D. Mishka and Interesting sum time limit per test 3.5 seconds memory limit per test 256 megaby ...

  4. Collaborative Index Embedding for Image Retrieval

    最近看了一篇比较好的文章,效果很好,简单记录一下. 这篇文章的核心思想是,融合两种不同类型的特征.文章中用的是SIFT和CNN提取的特征.还是神经大法好啊. 第一步就是建立两种不同特征的索引,文章用的 ...

  5. 洛谷P2983 [USACO10FEB]购买巧克力Chocolate Buying

    题目描述 Bessie and the herd love chocolate so Farmer John is buying them some. The Bovine Chocolate Sto ...

  6. hdu畅通工程

    传送门 畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  7. bootstrap模版兼容IE浏览器代码嵌入

    1.  bootstrap模板为使IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可. <script src="https://oss.maxc ...

  8. Lagom学习 五 Hello world工程

    用Maven创建一个Hello world的Lagom工程: 1: 在想创建工程的目下下,打开CMD 2:  mvn archetype:generate -Dfilter=com.lightbend ...

  9. qt 安装编译

    项目编译的时候提示 cannot find -lGL sudo apt-get install libgl1-mesa-dev

  10. Java集合框架(1)

    Collection接口:它是Java集合框架的一个根接口,也是List.Set和Queue接口的父接口.同时它定义了可用于操作List.Set和Queue的方法—增删改查. Map接口:它提供了一种 ...