Nuxt js - SSR 頁面重復組件

Question

我正在生成一個帶有組件列表的簡單 static 頁面，當我從另一個頁面訪問該頁面時，它會正確呈現所有內容。 當我直接登陸頁面時，一些組件在頁腳之后再次呈現。 如果我檢查元素，我可以看到它們是相同的元素，但在頁腳之后再次呈現。 任何人都知道為什么會這樣？

<template>
  <div>
    <client-only>
      <MobileNav v-if="!isDesktop" />
      <Topnav v-if="isDesktop" />
      <div v-if="isDesktop">
        <Navbar active-page="consumers" />
      </div>
    </client-only>
    <Hero page="consumers" hero-text="for consumers" text-alignment="middle" />
    <AnchorNav :anchor-nav-items="anchorNavData" />

    <div id="for-consumers">
      <Highlight :data="highlight1" />
      <Highlight :data="highlight2" />
    </div>

    <LazyCardsWithModal :data="cardsList" />

    <LazyImageText :data="imageTextDirector" />

    <LazyKeyCards :data="keyCards" />

    <LazyAccordion :data="accordionData" />

    <LazyOrderedList :data="orderedList" />

    <LazyLogoCards :data="logoCards" :index="1" />
    <LazyLogoCards :data="logoCards2" :index="2" />

    <LazyCardsWithModal :data="productsCards" class="consumers-cards-2" />

    <Footer />

    <Modal
      v-show="this.$store.state.modal.active"
      :id="this.$store.state.modal.id"
    />
  </div>
</template>

這是頁面模板的樣子

Answer 1

當作為 static 站點運行時，問題在於 vuex state 管理。 在開發模式下運行時可以正常工作。

克服這一點的方法是。

1. 避免在模板中直接調用 state 變量。
2. 使用client-only標簽有助於避免 dom 不匹配問題。