nuxt-link 显示 slug 不是 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>

单击博客 post 时调用 post 链接函数，代码如下：

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

问题是我不想在 URL 中显示 Firebase 密钥 ID，我想显示 slug。跟踪 Firebase 密钥 ID 在 Google Analytics 中可读性不强。我将 slug 保存在我的 Firebase DB 中，我可以在我的页面上访问 slug，但我不能只调用路径中的 slug，出于某种原因我必须包含 id。我现在正在使用一个解决方法，即添加一个查询字符串，但我真正想要的是只在 URL 中显示 slug。必须有办法做到这一点。您可以在我的网站上查看实际效果：https://igeddit.ca

每个post在Nuxt中显示为这个文件结构：

提前致谢...

Answer 1

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

你这样做是为了让鼻涕虫成为路线。

上面的代码现在更改为：

<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 和 slug。鼻涕虫预计会出现在路线中。注意：您可以从 .nuxt folder/router.js.

中获取名称："posts-slug"

nuxt-link 显示 slug 不是 id

nuxt-link display slug not id

slug

vue-router

nuxt.js