vue中router-link传参(商品从列表页到具体详情页跳转)
2019-01-18 19:17
603 查看
今天用vue做商品详情页的时候遇到一个问题:
在主页有商品列表,点击某一个列表跳转到相应商品的详情页中去,
使用router-link链接,代码如下
< div v-for=“item in goods”>
< router-link :to="{name: ‘Details’, params: {goodId: item.goodId}}">
< /div>
此处name的值为设置路由时的详情页的name值
路由配置如下:
{
path: “/details/:goodId”,
name: “Details”,
component: Details
}
详情页获取以上的参数,代码如下:
在mounted(){}中获取:
this.goodId = this.$route.params.goodId;
this.getDetail(this.goodId);
这样就获取了某一商品的详情信息了
相关文章推荐
- 在vue中无论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去
- Vue跳转传值 router-link
- vue,router-link传参以及参数的使用
- jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
- vue-router--路由传参结合请求数据(页面底部按钮跳转功能实现参考)
- react-router HashRouter和BrowserHistory的区别, 以及配置、使用, Link跳转传参等等
- 我的vue.js学习之路(vue中router-link传参以及参数的使用)
- vue,router-link传参以及参数的使用
- Vue -- router-link(传参)
- vue-router二级路由跳转一级路由传参(变量)的问题
- vue-router实现几级页面跳转及传参
- react-router 4.2.0<link>页面跳转-传参与不传参
- vue,router-link传参以及参数的使用
- Vue 页面跳转不用router-link的实现代码
- Vue 单页内使用router-link跳转,动态使用router.push()实现页内跳转,跳转到其他组件
- vue,router-link传参以及参数的使用
- vue 列表页跳转详情页获取id的方法以及详情页通过id获取数据
- vue学习五 router-link传参以及参数的使用
- vue使用router-link :to="{path:'/index'}"传参以及参数的使用
- jq+ajax请求本地数据加载商品列表页并跳转详情页