如何在Vue.js应用中通过Vue Router在URL中添加动态商品名

总共需要修改两处代码，操作如下：

修改路由配置 #

在路由路径中新增动态参数productSlug用于承载商品名，修改后配置如下：

{
  path: "/product/:productSlug",
  name: "SingleProduct",
  component: SingleProduct,
},

动态参数productSlug不会影响原有路由匹配逻辑，也不会干扰query参数的传递。

修改router-link跳转逻辑 #

拼接处理后的商品名到跳转路径中，将商品名的空格替换为短横线即可匹配你需要的URL格式，假设商品名称存储在item.name字段，修改后代码如下：

<router-link :to="{ path: `/product/${item.name.replace(/\s+/g, '-')}`, query: { ID: item.id } }">...</router-link>

如果商品名包含其他特殊字符，可自行补充正则过滤规则，避免非法字符出现在URL中。
若需要在商品详情页获取URL中的商品名，可通过this.$route.params.productSlug直接读取。

内容的提问来源于stack exchange，提问作者Masudalimran