Vuejs 中 Preloader 组件的问题

问题描述

我使用 bootstrap 和 jquery 下载了一个 HTML 模板，然后我尝试将它们放入 VueJs。我工作得很好，直到我使用路由器在页面之间导航。我在两个主页和单帖子页面中有一个预加载器组件。第一次访问该站点时一切正常，但是当我使用路由器链接切换到另一个页面时，Preloader 一直在不停地运行。我没有这方面的经验，因为我是 Vuejs 的新手。有人能帮我吗？这是我的代码

这是我的组件代码。我的两个组件几乎一样

<template>
  <div>
    <Preloader />
    <Header />
    <BreadcrumbArea />
    <PaginationPost />
    <DetailPost />
    <Footer />
  </div>
</template>

<script>
import Preloader from '../components/Preloader'
import Header from '../components/Header.vue'
import BreadcrumbArea from '../components/BreadcrumbArea.vue'
import PaginationPost from '../components/PaginationPost.vue'
import DetailPost from '../layouts/DetailPost'
import Footer from '../components/Footer.vue'

export default {
  name: 'SinglePost',components: {
    Preloader,Header,BreadcrumbArea,PaginationPost,DetailPost,Footer
  }
}
</script>

<style></style>

我的预加载器组件

 <template>
  <div class="preloader d-flex align-items-center justify-content-center">
    <div class="lds-ellipsis">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Preloader'
}
</script>

<style></style>

我的 App.vue

 <template>
  <div id="app">
    <router-view />
  </div>
</template>

我的 Jquery 代码

import jQuery from 'jquery'
(function($) {
  'use strict'
  $(window).on('load',function() {
    $('.preloader').fadeOut('slow',function() {
      $(this).remove()
    })
  })
})(jQuery)

这是我尝试将链接路由到另一个页面时的问题。我减小了 Preloader 的大小。它不停地加载。我第一次访问该网站或重新加载页面时，Preloader 工作正常。

解决方法

Vue 路由器在页面之间导航时不会重新加载页面，因此当您使用浏览器 URL 栏进入应用程序时，窗口对象只会加载一次。
在另一种方式中，事件回调函数只运行一次，但似乎您正在做一些导致组件开始为每个页面加载的事情（例如将其添加到每个页面而不是将其添加到布局中）。它会这么多如果您分享更多信息，将会很有帮助。
您可以做的是为页面使用安装的生命周期，您将预加载组件放在那里，并将控制内容放在那里。

jquery preloader vue.js