How to create Nuxt dynamic routing without the ID in the URL

Question

Normally in Nuxt when creating dynamic routing for things like blogs post, I would do something like the following structure.

Pages directory

• pages/posts/
• pages/posts/index.vue
• pages/posts/_category/
• pages/posts/_category/index.vue
• pages/posts/_category/_sub-category/
• pages/posts/_category/_sub-category/_id.vue

/pages/posts/_category/_sub-category/_id.vue

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      id: this.$route.params.id,
      all_posts: '',
      filtered_post: '',
      post_data: '',
      category: '',
      sub_category: '',
      title: ''
    }
  },

  mounted () {
    this.getSingle()
  },

  methods: {

    getSingle () {
      axios.get('someapiendpoint')
        .then((response) => {
          // get response data
          this.all_posts = response.data
          // filter response data by id
          this.filtered_post = this.all_posts.filter(post => post.id === this.id)
          // get data from index [0]
          this.post_data = this.filtered_post[0]
          // set data vars
          this.category = this.post_data.category
          this.sub_category = this.post_data.sub_category
          this.title = this.post_data.title
        })
    }

  }

}
</script>

Nuxt.config.js

generate: {
    routes () {
      return axios.get('https://someapiendpoint').then((res) => {
        return res.data.map((post) => {
          return {
            route: '/posts/' + post.category + '/' + post.slug + '/' + post.id,
            payload: (post)
          }
        })
      })
    }
  },

Nuxt Links

<nuxt-link :to="{ path: '/posts/' + post.category + '/' + post.sub_category + '/' + post.id}" v-for="post in displayedPosts" :key="post.id">
    {{ post.title }}
</nuxt-link>

And this would generate routes like

/posts/my-category/my-sub-category/my-article-title/12345

My question is how can I remove the ID from the URL and still get the data based on the ID but with a URL like this

/posts/my-category/my-sub-category/my-article-title/

Answer 1

Keeping the id on the URL is not really good for SEO. You can filter your posts only by slugs instead of IDs, a slug is unique for each post. or if you still want to use the ID as the key to filter, you can use Vuex to save the current post ID on click.