diff --git a/components/kl-wallpaper-category/index.vue b/components/kl-wallpaper-category/index.vue index 582565d..665c120 100644 --- a/components/kl-wallpaper-category/index.vue +++ b/components/kl-wallpaper-category/index.vue @@ -133,27 +133,43 @@ // } // getEditionsList() - /**获取分类下拉框 */ - const { data: projectTypeList } = await useAsyncData( - `projectType-draw-${props.type}-${query.value.projectType}`, - async () => { - let parentId: any = '0' - if (breadList?.value && breadList?.value.length > 1) { - if (breadList.value.length > 2) { - const length = breadList.value?.length - parentId = breadList?.value[length - 2].id - } else { - const length = breadList.value?.length - parentId = breadList?.value[length - 1].id - } + console.log('breadList.value.length----', breadList.value?.length); + + // 服务端渲染兼容方案:顺序执行异步操作 + // 1. 先获取面包屑数据(已在上面通过useAsyncData获取) + + // 2. 顺序获取分类下拉框数据 + // 创建一个函数来获取分类数据,确保服务端渲染时能获取到数据 + const getProjectTypeList = async () => { + let parentId: any = '0' + + // 计算parentId的逻辑 + if (breadList?.value && breadList?.value.length > 1) { + if (breadList.value.length > 2) { + const length = breadList.value?.length + parentId = breadList?.value[length - 2].id + } else { + const length = breadList.value?.length + parentId = breadList?.value[length - 1].id } + } + + try { + // 获取分类数据 const res = await parent({ type: 1, parentId: parentId }) const all = [{ id: parentId === '0' ? '-1' : parentId, name: '全部' }] return [...all, ...res.data] - }, - { - immediate: true, + } catch (error) { + console.error('获取分类数据失败:', error) + return [] } + } + + // 使用useAsyncData获取分类列表,确保服务端渲染兼容性 + const { data: projectTypeList } = await useAsyncData( + `projectType-draw-${props.type}-${query.value.projectType}-${Date.now()}`, + getProjectTypeList, + { server: true } // 确保在服务端执行 ) /** 版本 */