Vuejs 中 Preloader 组件的问题

Question

我使用 bootstrap 和 jquery 下载了一个 HTML 模板，然后我尝试将它们放入 VueJs。在我使用路由器在页面之间导航之前，我工作得很好。我在两个主页和 Single-Post 页面中有一个 Preloader 组件。我第一次访问该站点时一切正常，但是当我使用路由器 link 切换到另一个页面时，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)

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

Answer 1

Vue 路由器在页面之间导航时不会重新加载页面，因此当您使用浏览器 URL 栏进入您的应用程序时，window 对象只加载一次。
换句话说，事件回调函数只有一次运行但看起来你正在做一些导致组件开始为每个页面加载的东西（比如将它添加到每个页面而不是将它添加到布局）。它如果您分享更多信息，将会非常有帮助。
你可以做的是对页面使用安装的生命周期，你把你的预加载组件放在那里，然后把控制东西放在那里。

Vuejs 中 Preloader 组件的问题

Problem with Preloader component in Vuejs

jquery

preloader

vue.js