Vue组件间跳转参数不同，页面如何只接收一个特定参数值？

本文共计695个文字，预计阅读时间需要3分钟。

作为Vue的初学者，你可能会遇到类似的问题，比如对组件的跳转。我们想通过不同的参数和调用不同方法来实现这一功能。例如，在`app.vue`中，使用`ul`和`li`元素，并设置`class=navList`，通过`v-for`循环遍历`goods`数组，并使用`key`绑定每个商品的唯一标识。同时，我们使用`router-link`来导航。代码如下：vue {{ item.name }}

作为vue的初用者，你可能会像我一样遇到一个问题，对跳转组件是，我们想通过参数不同，调用不同的方法。

例如：

app.vue

<ul> <li class="navList" v-for="index in goods" :key="index.name"> <router-link :to="{path:index.link,query:{type:index.name}}" > {{index.name}} </router-link> </li> </ul>

app…vue中的data数据：

goods:[ {name:'女装',link:'goods'}, {name:'男装',link:'goods'}, ]

在goods.vue中接受数据

mounted(){ this.stri=this.$route.query.type; }

当我循环输出这些链接，每个链接的地址都是一样的。