Problem with Preloader component in Vuejs

I downloaded an HTML template using bootstrap and jquery, then I tried to put them into VueJs. I worked fine until I used the router to navigate between pages. I have a Preloader component in two Home and Single-Post pages. The first time I go to the site everything works fine, but when I use the router link to switch to the other page, the Preloader keeps running without stop. I have no experience with this because I'm new to Vuejs. Can someone help me? Here is my code

This is my component code. My two components are almost the same

<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>

My Preloader component

 <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>

My App.vue

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

My Jquery code

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

This is my problem when trying to router link to another page. I have reduced the size of the Preloader. It keeps loading without stop. The first time I go to the site or when I reload a page, Preloader works fine.

Vue router doesn't reload the page when navigating between pages, So the window object load exactly one time when you enter your app using browser URL bar.
In another way, the event callback function is run only one time but it seems you are doing something that causes the component to start loading for each page(like add it to every page instead of add it to layout).It will be so much helpful if you share more info.
what you can do is using mounted life cycle for the page you put your pre-load component there and put control stuff there.