Vue <router-link> 不在 URL 中附加参数答案

【问题标题】：Vue <router-link> not appending params in URLVue <router-link> 不在 URL 中附加参数
【发布时间】：2019-11-26 22:18:12
【问题描述】：

在我的路由器链接中，我需要设置 id 参数，它附加在 Vue 检查中，但不附加在 URL 中。

<router-link
            :to="{ name: 'app-gateway-airport', params: { id: slotProps.row.id } }"
            class="mr-2 rounded border boder-button-border w-8 h-8 flex flex-row items-center justify-center cursor-pointer">
  <delete-icon />
</router-link>

slotProps.row.id这个变量设置正确。

它没有在 URL 中附加 id 参数。

【问题讨论】：

你的路由配置是什么？
它的 nuxt js。 prasedTo() { if (this.skipParsing) { return this.to; } if (_.isString(this.to)) { return this.to; } 返回 this.localePath(this.to); }
您的路线名称似乎错误 - 如果您有 _id.vue 组件，路线名称应以 -id 结尾。也编辑了我的答案。试试看。如果有帮助，请将我的答案标记为解决方案。如果没有，你需要给我更多的细节......

标签： vue.js vuejs2 vue-router

【解决方案1】：

为了使用参数，你必须配置你的route with dynamic component

在 Nuxt.js 中，您无需手动定义路由配置，而是 Nuxt 从文件夹/文件结构生成它。为了查看是动态的（有一些参数），你需要关注naming convention of Nuxt - 在这种情况下，你的（目标）视图组件应该命名为_id.vue

另外，在创建链接时，请务必设置正确的路由名称：<nuxt-link :to="{name: 'app-gateway-airport-id', params: { id: slotProps.row.id }}">（您应该在 Nuxt 中使用 <nuxt-link> 而不是 <router-link>）

【讨论】：

我已经创建了 _id.vue 文件。但我的问题是，在路由链接中，我无法为 URL 附加参数。 当前 URL：example.com/app/airport 预期 URL：example.com/app/airport/1 我在路由器链接中添加了 参数：{ id: slotProps.row.id } .
一个人怎么知道呢？您应该首先将所有这些信息添加到您的问题中......
对不起，伙计，但您的问题中没有关于您期望什么链接以及生成什么链接的问题。也没有关于您的目录结构，这是必不可少的，因为 Nuxt 使用它来生成路由器配置....
它通过将路由名称从视图更改为 id 来解决。感谢您的支持。