作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我最近收到了一个使用 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" }
}
最佳答案
不确定我是否理解正确,但是您可能有递归路线,对吗?
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
关于javascript - 如何在 Nuxt 中使用一个组件创建无限路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68737439/
我是一名优秀的程序员,十分优秀!