Nuxt 3 组件首次渲染时如何设置加载器

Question

我正在使用 element plus 库开发 nuxt 3 项目，我的一个页面有 3 个选项卡，我已将 3 个选项卡内容分为 3 个组件，并且我设置了条件以最初仅渲染第一个选项卡组件。当单击第二个或第三个选项卡时，将呈现特定的选项卡组件。

我的问题是，当我第一次单击第二个或第三个选项卡时，页面需要一些时间来加载组件（不多，但我们可以看到差异）

之后，一旦所有 3 个组件都加载完毕，每个选项卡的内容就会顺利加载，无需花费时间。

<template>
<el-tabs v-model="activeTabName" @tab-click="handleClick">
  <el-tab-pane label="Tab 1" name="tab1">
    <LazyTab1
      v-if="activeTabName == 'tab1'"
      :form-data="formData"
      :loader="loader"
      @on-submit="submitForm"
    />
  </el-tab-pane>
  <el-tab-pane label="Tab 2" name="tab2">
    <LazyTab2
      v-if="activeTabName == 'tab2'"
      :form-data="formData"
      :loader="loader"
      @submit-form="submitForm"
    />
  </el-tab-pane>
  <el-tab-pane label="Tab 3" name="tab3">
    <LazyTab3
      v-if="activeTabName == 'tab3'"
      :form-data="formData"
      :loader="loader"
      @on-submit="submitForm"
    />
  </el-tab-pane>
</el-tabs>
</template>

<script setup>
const activeTabName = ref("tab1");
const formData = reactive({
  tab1: {
    ..
    ..
  },
  tab2: {
    ..
    ..
  },
  tab2: {
    ..
    ..
  }
});

//Tab click event
const handleClick = (tab, event) => {
};

//Form submit
const submitForm = async (formRef) => {
  //After form submit code
}

//Get form details
const getDetails = async () => {
  //API call and set the formData from API response
}
onMounted(() => {
  getDetails();
});
</script>

我在每个选项卡上设置了

if

条件，因此它一次仅加载一个选项卡（当前选项卡），但是当我们最初切换选项卡时，只有在加载后第一次出现问题，它才能正常工作。

请帮我解决这个问题。另外，除了上述之外，是否还需要其他任何东西，请告诉我。

我真的很感谢您提供的任何帮助。

Answer 1

据我了解，nuxt 尝试在客户端未加载 DOM 的情况下在服务器端处理请求，但由于某种原因它无法这样做。要明确指示应在客户端安装 DOM 后执行该函数，请使用

nextTick()

onMounted(async () => {
  await nextTick();
  getDetails();
});

如文档中所述 - https://nuxt.com/docs/guide/directory-struct/components#client-components

.client组件只有在挂载后才会渲染。访问 使用 onMounted() 渲染的模板，在 onMounted() 钩子的回调。

有关 nextTick 的更多信息 - https://vuejs.org/api/general.html#nexttick