如何在 Nuxt 中用一个组件创建无限路由

Question

我最近收到了一个使用 Nuxt.js 的项目，但遇到了一些问题。 我有一个从 API 获取一些产品并从 Vuex 获取它们的组件。 每个产品可能有一个孩子数组，每个孩子可能有一个孩子数组等等。

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

我需要的是每次用户点击图像组件时，如果产品有子项并且它的长度大于0，则将子项重定向到当前路由并获取子数组。

Answer 1

不确定我是否理解正确，但您可能有递归路线，对吧？
Nuxt 的未知动态嵌套路由可能对 IMO 有所帮助：https://nuxtjs.org/docs/2.x/features/file-system-routing#unknown-dynamic-nested-routes

如果你这样组织你的页面

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

你会得到以下路线

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