Nuxt js - SSR页面重复组件

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状态管理问题。它在开发模式下运行时工作正常。

克服这一切的方法是。

避免在template.

• making中直接调用状态变量的

1. 使用client-only标记，这有助于避免多玛不匹配问题.