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

Question

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

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

如您所见，我按下 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>

Answer 1

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

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

而且出于某种原因这种风格也有效，为此我没有导入这种风格的文件。重新加载后它变得很糟糕，但现在，只需导入它就可以正常工作：p

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

Page breaks after reload VueJS + Nuxt.js

html

javascript

vue.js

nuxt.js