如何在Nuxt中禁用或自定义请求触发的顶部进度条？

Nuxt.js 搭配官方 Axios 模块使用时，默认会调用框架内置的 loading 组件在请求触发时展示顶部进度条，对应的关闭和自定义方案如下：

• 全局关闭所有请求的进度条：在项目根目录的 nuxt.config.js 中添加如下配置

  export default {
    // 方式1：直接关闭Nuxt全局loading组件，会同时关闭路由跳转等场景的进度条
    loading: false,
    // 方式2：仅关闭Axios触发的loading，不影响其他场景的进度条
    axios: {
      progress: false
    }
  }
  

• 仅关闭单个请求的进度条：在请求配置中添加progress: false参数即可

  // 示例：get请求关闭进度条
  await this.$axios.get('/api/data', { progress: false })
  // 示例：post请求关闭进度条
  await this.$axios.post('/api/submit', formData, { progress: false })
  

基础属性修改（通过配置项实现） #

直接在 nuxt.config.js 的loading配置项中调整核心样式，无需额外写CSS：

export default {
  loading: {
    // 进度条主色
    color: '#2563eb',
    // 请求失败时进度条的颜色
    failedColor: '#ef4444',
    // 进度条厚度，默认是2px
    height: '4px',
    // 进度条动画的最大持续时间，单位ms
    duration: 2000,
    // 路由跳转时是否保持进度条连续展示
    continuous: true
  }
}

自定义复杂样式（通过CSS覆盖实现） #

如果需要修改圆角、阴影、位置等更复杂的样式，可以直接覆盖默认进度条的类名.nuxt-progress的样式：

1. 先在项目的assets/css目录下新建全局样式文件，比如global.css，添加如下样式：

   .nuxt-progress {
     /* 自定义右侧圆角 */
     border-radius: 0 3px 3px 0 !important;
     /* 自定义发光阴影 */
     box-shadow: 0 0 8px rgba(37, 99, 235, 0.6) !important;
     /* 调整z-index避免被其他元素遮挡 */
     z-index: 99999 !important;
     /* 如需放到页面底部，可取消注释如下配置 */
     /* top: auto !important;
     bottom: 0 !important; */
   }
   

2. 在nuxt.config.js中引入全局样式文件：

   export default {
     css: [
       '~/assets/css/global.css'
     ]
   }
   

内容的提问来源于stack exchange，提问作者Uğurcan