Normally in Nuxt when creating dynamic routing for things like blogs post, I would do something like the following structure.
Pages directory
/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/
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.