Normalmente, en Nuxt, al crear enrutamiento dinámico para cosas como publicaciones de blogs, haría algo como la siguiente estructura.
Directorio de páginas
/páginas/mensajes/_categoría/_subcategoría/_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) } }) }) } },Enlaces Nuxt
<nuxt-link :to="{ path: '/posts/' + post.category + '/' + post.sub_category + '/' + post.id}" v-for="post in displayedPosts" :key="post.id"> {{ post.title }} </nuxt-link>Y esto generaría rutas como
/posts/my-category/my-sub-category/my-article-title/12345
Mi pregunta es ¿cómo puedo eliminar la ID de la URL y seguir obteniendo los datos basados en la ID pero con una URL como esta?
/posts/mi-categoria/mi-sub-categoria/mi-articulo-titulo/
Mantener la identificación en la URL no es realmente bueno para el SEO. Puede filtrar sus publicaciones solo por slug en lugar de ID, una slug es única para cada publicación. o si aún desea usar la ID como clave para filtrar, puede usar Vuex para guardar la ID de publicación actual al hacer clic.