nuxt-link display slug not id

Question

这是显示我的博客文章列表的代码：

  <nuxt-link :to="postLink" class="post-preview">
    <article>
      <div class="post-thumbnail" :style="{backgroundImage: 'url(' + thumbnail + ')'}"></div>
      <div class="post-content">
        <h1>{{ title }}</h1>
        <p>{{ previewText }}</p>
      </div>
    </article>
  </nuxt-link>
</template>

在单击博客帖子时调用postLink函数，其代码如下：

  computed: {
    postLink() {
      return this.isAdmin
        ? "/admin/" + this.id + "?" + this.slug
        : "/posts/" + this.id + "?" + this.slug;
    }
  }

问题是我不希望Firebase密钥ID显示在URL中，我想显示该段。跟踪Firebase密钥ID在Google Analytics（分析）中不太可读。我已将Slug保存在Firebase数据库中，并且可以访问页面上的Slug，但是我不能只在路径中调用Slug，出于某种原因，我必须包含id。目前，我正在使用一种变通方法，即添加查询字符串，但我真正想要的是仅在URL中显示该段。必须有一种方法可以做到这一点。您可以在我的网站上查看此操作：https://igeddit.ca

每个帖子在Nuxt中都显示有此文件结构：

预先感谢...

Answer 1

感谢ManUtopiK的回复，但对于不认识的人，这是一个模糊的答案。自发布问题以来，我已经找到了答案。因此，对于那些寻找答案的人，我确实将以前的文件夹结构从posts / _id / index.vue更改为posts / _slug / index.vue。

您这样做是为了让the成为路线。

上面的代码现在更改为：

<nuxt-link :to="postLink" class="post-preview">
....
 postLink() {
      return this.isAdmin
        ? "/admin/" + this.id
        : { name: "posts-slug", params: { id: this.id, slug: this.slug } };
    }

此代码传递ID和子代码。预计该路线中有该弹头。注意：您可以从.nuxt文件夹/router.js中获得名称：“ posts-slug”。