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

Posted 2023-02-22

【中文标题】如何在 Nuxt 中用一个组件创建无限路由

【英文标题】：How create the infinite route with one component in Nuxt

【发布时间】：2021-10-14 15:29:07

【问题描述】：

我最近收到了一个使用 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，则将子项重定向到当前路由并获取子数组。

【参考方案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

【讨论】：

你是对的！但我不知道如何处理它，当我单击每个 Image 组件时，都会为我返回子数据并重新创建页面！

@NiazEstefaie 不确定实际代码，但想法是当您单击某些东西时有一些递归？单击时，您可以通过有效负载创建像/image/abc/def/ghi 这样的动态路径，_.vue 组件应该捕获它，然后，您可以查看嵌套结果并手动或使用类似 @ 的方式获取您要查找的数据987654322@ 所以，不要重新创建页面，只要在你到达这里就获取数据。