Question

我正在生成一个带有组件列表的简单静态页面，当我从另一个页面访问该页面时，它会正确呈现所有内容。当我直接登陆页面时，一些组件在页脚之后再次呈现。如果我检查元素，我可以看到它们是相同的元素，但在页脚之后再次呈现。有人知道为什么会这样吗？

<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

问题是作为静态站点运行时的 vuex 状态管理。在开发模式下运行时可以正常工作。

克服这个问题的方法是。

避免直接调用模板中的状态变量。
利用 client-only 标签有助于避免 dom 不匹配问题。

Nuxt js - SSR 页面重复组件

1 个答案: