重新加载 VueJS + Nuxt.js 后分页符答案

【问题标题】：Page breaks after reload VueJS + Nuxt.js重新加载 VueJS + Nuxt.js 后分页符
【发布时间】：2022-01-07 11:39:29
【问题描述】：

我有一个奇怪的问题。我正在创建我的应用程序，其中有几页。通常它看起来没问题：

但是当我重新加载页面时会发生这种情况：

如您所见，我按下 Ctrl + A 只是为了向您显示有一个文本。第二次重新加载没有帮助。我的申请是在VueJS + NuxtJS 上提出的。有人遇到过吗？

这里是 HTML，如果它有用的话：

<template>
  <div>
    <SideBar :subpages='subpages' @clicked="filterByDate" />
    <div class='blog-header'>
      <div class='search-div'>
        <input class='search-field' placeholder='Search...'>
      </div>
    </div>
    <div class='post-content'>
      <div v-if='$route.params.id'>
        <h1 class='big-text post-title'>{{ post.title }}</h1>
        <h1 class='big-text post-title'>{{ post }}</h1>
      </div>
      <div v-else>
        <div v-for='title in categoriesAndPretitles' :key='title.section'>
          <div v-if='$route.params.category === title.section'>
            <h1 class='big-text post-title'>{{title.title}}</h1>
            <p class='description-text'>{{title.text}}</p>
          </div>
        </div>
        <div v-for='p of posts' :key='p.id'>
          <div class='post-preview' @click='toPost(p.id, p.type)'>
            <div class='post-preview-img'></div>
            <div class='post-preview-content'>
              <p>{{ p.title }}</p>
              <p class='plot'>{{ p.plot }}</p>
              <p class='date'>{{ p.created_at }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    <Footer />-->
  </div>
</template>

【问题讨论】：

不知道你怎么能指望我们只用图片来帮助你。
你想看什么？只是 HTML 的和平？我不认为它会有用
试着找一些有用的东西给我们看。试着站在我们这边，这是否足以解决某人的问题，仅通过查看图像？主要是minimal reproducible example 或一些设置/标记。

标签： javascript html vue.js nuxt.js

【解决方案1】：

实际上，答案有点傻，因为它是关于样式的。我的意思是，样式没有正确导入。对于主页，我有这种风格：

body {
  margin: 0;
  background-color: #181919;
}

由于某种原因，这种样式也可以使用，为此我没有使用这种样式导入文件。并且在重新加载它之后，但现在，只需导入它就可以正常工作：p

【讨论】：