CODEWITHSUNDEEP
vue-routernuxt.jsslug
sandalwoodsh
sandalwoodsh

Reputation: 235

nuxt-link display slug not id

Here's my code to display a list of my blog articles: 

  <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>

The postLink function is called on clicking the blog post, with the following code:

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

The problem is that I don't want the Firebase key id to display in the URL, I want to display the slug. Tracking the Firebase key id is not very readable in Google Analytics. I have the slug saved in my Firebase DB, and I can access the slug on my page, but I can't just call only the slug in the path, I have to include the id for some reason. I'm using a working around at the moment, which is to add a query string, but what I really want is to only display the slug in the URL. There must be a way to do this. You can view this in action at my site: https://igeddit.ca

Each post is displayed with this file structure in Nuxt:

image

Thanks in advance...

Upvotes: 1

Views: 5586

Answers (1)

sandalwoodsh
sandalwoodsh

Reputation: 235

Thanks for the reply ManUtopiK, but for people who don't know, it's a vague answer. Since posting my question, I have found the answer. So for those looking for the answer, I did change my previous folder structure from posts/_id/index.vue to posts/_slug/index.vue.

You do that so that the slug becomes the route.

The code from above now changes to:

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

This code passes the id and the slug. The slug is expected in the route. Note: you can get the name: "posts-slug" from the .nuxt folder/router.js.

Upvotes: 3

Related Questions