Vue路由传参实践-优快云博客

本文链接：https://blog.youkuaiyun.com/hacker_kids/article/details/51570687

本文介绍如何在Vue.js应用中利用具名路径进行路由传参，特别是如何在点击事件中传递商品ID等特定属性，以便在修改商品详情时正确识别所选商品。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-route

vue-route

获取列表商品id

使用v-link 链接获取：
因为点击时需要知道有些东西的username或其他的特有属性来识别，因此具名路径的出现是的点击时可以获取我们想要的属性，使程序能够明白点击时点击了什么，该传什么参数。

<!-- 具名路径 -->
<a v-link="{ name: 'user', params: { userId: 123 }}">User</a>

传入部分，需要给出页面的name

例如：

'/change-product/:id':{
    name: 'change-product',
    component: ChangeProduct
  }

点击获取商品的属性，则需要根据商品的id来判断

<a class="btn btn-primary" v-link="{ name: 'change-product', params: { id:product.id } }" role="button">修改</a>

在v-for 循环遍历product并输出product商品列表，其中每个product含有自己的独特id属性，通过其id属性判断点击的商品是哪个，然后将商品id传入路由获取params中，当路径匹配一个含有动态片段的路由规则时，动态片段的信息可以从 $route.params 中获得，然后将获取到的id返回给v-link的具名路径，将其id的商品信息传入修改界面。