如何将道具插入<router-link> ?</router-link>

Question

如果我这样做{{ name }} ，我会得到“活动”

我想把它渲染到我的链接中

<router-link :to="'/' + '123' + '/' + item.id"> {{ item.name }}</router-link>

我试过用{{ name }}替换 '123'

<router-link :to="'/' + {{ name }} + '/' + item.id"> {{ item.name }}</router-link>

我不断得到

编译失败。 ./src/components/Table.vue?vue&type=template&id=783f90ce& (./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier": “5c3eaf11-vue-loader-template”}../node_modules/vue-loader/lib/loaders/templateLoader?js?.vue-loader-options.?/node_modules/cache-loader/dist/cjs?js.?ref --1-0?./node_modules/vue-loader/lib.?vue-loader-options../src/components/Table:vue:vue&type=template&id=783f90ce&) 模块构建失败（来自：/node_modules/vue- loader/lib/loaders/templateLoader.js): SyntaxError: Unexpected token (1:1767)

./src/components/Table.vue?vue&type=template&id=783f90ce& (./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier": “5c3eaf11-vue-loader-template”}../node_modules/vue-loader/lib/loaders/templateLoader?js?.vue-loader-options.?/node_modules/cache-loader/dist/cjs?js.?ref --1-0?./node_modules/vue-loader/lib.?vue-loader-options../src/components/Table:vue:vue&type=template&id=783f90ce&) 模块构建失败（来自：/node_modules/vue- loader/lib/loaders/templateLoader.js): SyntaxError: Unexpected token (1:1767)

Answer 1

只需在没有{{}}情况下使用它：

<router-link :to="'/' + item.name + '/' + item.id"> {{ item.name }}</router-link>

或使用字符串模板：

<router-link :to="`/${item.name}/${item.id}`"> {{ item.name }}</router-link>

Answer 2

小胡子语法在 html 属性中无效。 也就是说，这是无效的：

<router-link
  :to="'/' + '123' + '/' + item.id"
>
  {{ item.name }}
</router-link>

什么是正确的语法是：

<router-link
  :to="`/${item.name}/${item.id}`"
>
  {{ item.name }}
</router-link>

此外，我建议在文档中检查传递属性到路由 object 。 这将向您展示您可以在router中声明变量，例如:id 。

除了上述之外，我还要提出另一个建议，指出如果这被定义为组件的计算属性，那么它很容易在 devtools 和将来的调试中查看（例如，如果 object 道具未定义，您可能希望返回空字符串）。