Últimamente tengo un proyecto con Nuxt.js y tengo algunos problemas con él. Tengo un componente que obtiene algunos productos de una API y los obtiene de Vuex. Cada producto puede tener una serie de hijos y cada hijo puede tener una serie de hijos y así sucesivamente.
import Images from '@/components/products/Images' import { mapGetters } from 'vuex' export default { components: { Images }, data () { return { images: [], options: { width: 300, padding: { 2: 8, default: 12 } } } }, computed: { ...mapGetters({ products: 'getProducts' }) }, mounted () { this.images = this.products.filter( item => item.slug === this.$route.params.slug ) } } <template> <div class="container_pic"> <div class="flow-root"> <div v-for="(item, index) in images" :key="index" class="w-full md:p-4 py-4" > <h6 class="text-lg mt-6 mb-8"> {{ item.title }} </h6> <Images :item="item" :slug="true" :childs="item.childs" large /> </div> </div> </div> </template>Los datos de los productos pueden ser así:
products: { { id: 1, childs: [], title: "title 1" }, { id: 2, childs: [ { id: 3, childs: [], title: "title 3" }, { id: 4, childs: [ { id: 5, childs: [ { id: 6, childs: [], title: "title 6" }, ], title: "title 5" }, ], title: "title 4" }, ], title: "title 2" } }Lo que necesito es que cada vez que el usuario haga clic en el componente de la imagen, si el producto tiene un elemento secundario y su longitud era mayor que 0, redirija al elemento secundario a la ruta actual y obtenga la matriz de elementos secundarios.
No estoy seguro de entenderlo correctamente, pero es posible que tenga una ruta recursiva, ¿verdad?
Las rutas anidadas dinámicas desconocidas de Nuxt pueden ayudar aquí en mi opinión: https://nuxtjs.org/docs/2.x/features/file-system-routing#unknown-dynamic-nested-routes
Si organizas tus páginas así
pages/ --| people/ -----| _id.vue -----| index.vue --| _.vue --| index.vueObtendrás las siguientes rutas
/ -> index.vue /people -> people/index.vue /people/123 -> people/_id.vue /about -> _.vue /about/careers -> _.vue /about/careers/chicago -> _.vue