使用NuxtLink或RouterLink时不显示加载栏

export default {
  loading: false
}

<template>
  <div>
    <NuxtLink to="/about" no-prefetch>Go to About</NuxtLink>
  </div>
</template>

<template>
  <div v-if="loading" class="custom-loading-bar"></div>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    };
  },
  methods: {
    start() {
      this.loading = true;
    },
    finish() {
      this.loading = false;
    }
  }
};
</script>

<style>
.custom-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #42b983;
  z-index: 9999;
}
</style>

import CustomLoadingBar from '~/components/CustomLoadingBar.vue';

export default {
  loading: CustomLoadingBar
}

<template>
  <div>
    <NuxtLink to="/about" @click.native="disableLoadingBar">Go to About</NuxtLink>
  </div>
</template>

<script>
export default {
  methods: {
    disableLoadingBar() {
      this.$nuxt.$loading.start = () => {};
      this.$nuxt.$loading.finish = () => {};
    }
  }
};
</script>