CODEWITHSUNDEEP
javascriptvue.jsroutesnuxt.js
Niaz Estefaie
Niaz Estefaie

Reputation: 577

How create the infinite route with one component in Nuxt

I lately get a project with Nuxt.js and facing some problems with it. I have a component that gets some products from an API and gets them from Vuex. Each product may have an array of children and each child may have an array of children and so on.

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>

Products data can be like this:

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

What I need is each time user clicks on the image component, If the product has childs item and the length of it was bigger than 0 redirect the child to the current route and get the children array.

Upvotes: 5

Views: 461

Answers (1)

kissu
kissu

Reputation: 46696

Not sure if I understand it properly, but you may have a recursive route, right?
Nuxt's Unknown Dynamic Nested Routes may help here IMO: https://nuxtjs.org/docs/2.x/features/file-system-routing#unknown-dynamic-nested-routes

If you organize your pages like this

pages/
--| people/
-----| _id.vue
-----| index.vue
--| _.vue
--| index.vue

You'll get the following routes

/ -> index.vue
/people -> people/index.vue
/people/123 -> people/_id.vue
/about -> _.vue
/about/careers -> _.vue
/about/careers/chicago -> _.vue

Upvotes: 1

Related Questions