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

如何解决使用NuxtLink或RouterLink时，加载栏不显示

如果我使用标准链接，则加载栏会在每次加载页面上显示。如果我使用NuxtLink或RouterLink，则加载栏仅在初始应用加载时显示。无论如何，是否在每次页面加载时都显示它？

nuxt.config.js：

export default {
  /*
   ** Loading bar
   ** See https://nuxtjs.org/api/configuration-loading
   */
  loading: '~/components/Loading.vue',/*
}

components / Loading.vue：

<template lang="html">
  <div class="loading-page" v-if="loading">
  </div>
</template>

<script>
  export default {
    data: () => ({
      loading: false
    }),methods: {
      start() {
        this.loading = true
      },finish() {
        this.loading = false
      }
    },mounted() {
      this.$nextTick(() => {
        this.$nuxt.$loading.start()

        setTimeout(() => this.$nuxt.$loading.finish(),1000)
      });
    }
  }
</script>

<style scoped>
  .loading-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #2CFFB7;
    z-index: 10;
  }
</style>

解决方法

如果使用自定义加载栏，则可以在适当位置手动控制加载栏：

const start = () => {
  if (process.browser && window.$nuxt) {
    const {$loading} = window.$nuxt.$root;
    $loading.start && $loading.start();
  }
}

 const stop = (abort) => {
  if (process.browser && window.$nuxt) {
    const {$loading} = window.$nuxt.$root;
    $loading.finish && $loading.finish(abort);
  }
}

您应该在布局组件或其他重复使用的位置调用start方法以显示加载栏。

例如，在我的项目中，每次触发http请求时都需要显示自定义的加载动画，因此我将start方法添加到了axios的onRequest拦截器中。

export default function ({$axios}) {
  $axios.onRequest(config => {
    start()
    // ...
  })
  $axios.onResponse(response => {
    stop()
    // ...
  })
}