Skip to content

配置loading

一、nuxtjsloading默认是开启的,也可以关闭

    nuxt.config.js中
    loading:false

二、也可以自定义

js
    loading: '~/components/loading.vue',

    loading.vue中写入对应的内容

    查看api:https://www.nuxtjs.cn/api/configuration-loading

loading.vue(示例)

vue
<template lang="html">
   
  <div class="loading-page" v-if="loading">
       
    <p>Loading...</p>
     
  </div>
</template>

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

<style scoped>
  .loading-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding-top: 200px;
    font-size: 30px;
    font-family: sans-serif;
  }
</style>

三、你也可以不用nuxtjs的loading

sh
loading:false
自己在axios中进行封装