vue中router-link传参(商品从列表页到具体详情页跳转)

今天用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);

这样就获取了某一商品的详情信息了

  • 2
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vuerouter-link组件可以用来实现跳转,并且可以传递参数。具体步骤如下: 1. 在router/index.js定义路由: ``` import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import Detail from '@/components/Detail' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/detail/:id', name: 'Detail', component: Detail } ] }) ``` 2. 在Home组件使用router-link传递参数: ``` <template> <div> <ul> <li v-for="item in list" :key="item.id"> <router-link :to="{ name: 'Detail', params: { id: item.id } }">{{ item.title }}</router-link> </li> </ul> </div> </template> <script> export default { data() { return { list: [ { id: 1, title: '文章1' }, { id: 2, title: '文章2' }, { id: 3, title: '文章3' } ] } } } </script> ``` 3. 在Detail组件获取参数: ``` <template> <div> <h1>{{ title }}</h1> <p>{{ content }}</p> </div> </template> <script> export default { data() { return { title: '', content: '' } }, mounted() { const id = this.$route.params.id // 根据id获取文章详情 // ... this.title = '文章标题' this.content = '文章内容' } } </script> ``` 这样就可以实现通过router-link传递参数并在目标组件获取参数的功能了。 ### 回答2: Vue.js是一种前端JavaScript框架,能够帮助我们构建交互式的单应用程序。 在Vue.jsvue-router是一个提供路由系统的官方库,它允许我们在应用程序轻松导航和管理状态。而router-linkvue-router提供的一个组件,它可以在应用程序的路由之间进行自然的导航。我们可以使用vue-router-link来传递参数并在目标组件使用它们。 在使用Vue Router进行组件之间导航时,我们可以通过router-link组件来创建导航链接,如下所示: ``` <router-link :to="{ path: '/blog', query: { id: 1 }}">Blog</router-link> ``` 在上面的代码,我们传递了一个path属性,它是目标路径。我们还通过query属性传递了一个参数id,该参数的值为1。这个参数可以在目标路径的组件使用。 当我们点击上面的链接时,Vue Router会自动导航到应用程序的目标路径。当路由器在目标路径查找链接时,它将公开路由上的参数,以便目标组件可以使用它们。我们可以在目标组件通过this.$route.query来访问这些参数。 我们可以在目标组件的created钩子使用下面的代码来访问query参数: ``` created() { console.log(this.$route.query.id) } ``` 在上面的代码,我们使用console.log()函数将传递的id参数打印到控制台。我们还可以在组件使用computed属性来访问query参数。 这是如何使用Vue Router通过router-link组件将参数传递到目标组件并在目标组件使用它们的示例。这些功能可以让我们轻松地在Vue.js应用程序之间进行导航和交互。 ### 回答3: Vue使用router-link进行路由跳转时,常常需要传递参数,以便在目标组件进行数据渲染等操作。下面介绍如何使用Vue router-link传参并使用。 1. 传递参数 Vue router-link传递参数的方式有两种:query和params。 (1)query方式 query方式传递参数时,参数不会在URL显示,可以是任意类型的数据。 在template使用: ``` <router-link :to="{name: 'target', query: {id: 1}}">跳转</router-link> ``` 在js使用: ``` this.$router.push({name: 'target', query: {id: 1}}) ``` (2)params方式 params方式传递参数时,参数会在URL显示,只能是字符串类型的数据。 在template使用: ``` <router-link :to="{name: 'target', params: {id: 1}}">跳转</router-link> ``` 在js使用: ``` this.$router.push({name: 'target', params: {id: 1}}) ``` 2. 在目标组件使用参数 目标组件需要获取传递过来的参数,可以使用$route对象获取。 (1)query方式 在目标组件获取query方式传递的参数: ``` this.$route.query.id ``` (2)params方式 在目标组件获取params方式传递的参数: ``` this.$route.params.id ``` 以上就是Vue router-link传参并使用的方法介绍,使用起来非常简单,只需要注意传参方式以及目标组件参数的获取方式即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值