Vue组件跳转时，如何确保不同参数传递导致页面仅接收一个值？

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

作为Vue的初学者，你可能会像我一样遇到一个问题，那就是对于跳转组件，我们想通过不同的参数和调用不同的方法来实现。例如，在app.vue中，我们可以这样编写：

跳转到商品详情

作为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; }

当我循环输出这些链接，每个链接的地址都是一样的。参数不一样，当我们点击我们的按钮时

我们只会看到导航栏中的参数在变化，然而我们页面中的数并没有变化。