如何插入 nuxt-link 的 `to` 属性？

Question

我已经搜索了一段时间但似乎无法找到正确的答案。我有一个基本的 Nuxt 项目，具有以下目录结构（忽略fun.vue）：

这个想法是能够导航到具有以下路径的单个帖子http://localhost:3000/posts/1

这是可行的，如果我手动转到.../posts/1我的页面，则定义在_id.vue.

问题是，在我的索引页面中，我无法进入<NuxtLink>单个帖子页面。我有一个基本的 v-for 循环遍历我获取的 posts 数组，如下所示：

<template>
  <div>
    <div v-for="post in posts" :key="post.id">
      {{ post.title }}
      <NuxtLink to="`posts/${post.id}`">Link to post</NuxtLink>
    </div>
  </div>
</template>

例如，我希望在单击第二篇文章的链接后导航到posts/2，但我得到的是/%60posts/$%7Bpost.id%7D%60。为什么模板字符串不能正常转换？我也尝试过使用计算值，但没有成功，并且 Nuxt 路由文档也没有多大帮助。

非常感谢任何与此相关的帮助。

Answer 1

你忘记了分号：

:to="`/posts/${post.id}`"

甚至更好

:to="{ name: 'post-id' }" // post-id or basically the name you gave to your component 

如图所示：https: //router.vuejs.org/api/#router-link-props