如何使用 Vue Router 在我的 Vue.JS APP 的 url 中添加产品名称答案

【问题标题】：How do I add product name in the url in my Vue.JS APP using Vue Router如何使用 Vue Router 在我的 Vue.JS APP 的 url 中添加产品名称
【发布时间】：2021-11-22 12:01:21
【问题描述】：

我想在 url 中动态添加产品名称。目前是“http://localhost:8080/product/?ID=1”。我想让它“http://localhost:8080/product/Iphone-11-Pro?ID=1”

这是.vue文件中的路由器链接代码

<router-link :to="{ path: '/product/', query: { ID: item.id }">...</router-link>

这里是vue路由文件

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

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

正如您在文档中看到的（URL：https://router.vuejs.org/guide/essentials/navigation.html），示例如下所示：

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })

您必须使用 router.push 并且它应该可以工作。

【讨论】：