【Vue项目美化】NProgress顶部进度条详细配置

【Vue项目美化】NProgress顶部进度条详细配置

废话不多说，先上效果图

一、axios请求配置进度条

找到自己项目下的 request.js文件

import axios from 'axios';
import NProgress from 'nprogress' // 引入nprogress插件 
import 'nprogress/nprogress.css' // 引入 nprogress 样式
NProgress.configure({ showSpinner: false }) // 取消 NProgress 的右上角螺旋加载提示

let baseURL = 
  process.env.NODE_ENV == 'production' ? 'http://192.168.0.1' : 'http://blog.csdn.net/Web_chicken'
const service = axios.create({
  baseURL
});

// 请求拦截器，在此开启进度条
service.interceptors.request.use(
  res =>{
    console.log(res);
    NProgress.start() // 调用 NProgress 开始方法
  },
  error => {
    console.log(error);
  },
)

// 响应拦截器，在此关闭进度条
service.interceptors.response.use(
  // 无论请求成功与否 都需要将进度条关闭
  response => {
    NProgress.done() // 成功调用 NProgress 关闭方法
    if (response.status === 200) {
      return response.data;
    } else {
      Promise.reject();
    }
  },
  error => {
    NProgress.done() // 失败也调用 NProgress 关闭方法
    return Promise.reject(error);
  }
);

export default service;

二、路由拦截器配置进度条

找到自己项目的router.beforeEach位置，由于我的是个demo，所以直接写到了main.js中

// 引入不多说，上边有注释
import NProgress from 'nprogress' 
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false })

// 路由前置钩子，在此开启进度条
router.beforeEach((to, from, next) => {
 NProgress.start()
 next()
})
 
// 路由后置钩子，在此关闭进度条
router.afterEach(() => {
 NProgress.done()
})

三、自定义进度条样式

#nprogress .bar {
  background: red !important;
}

建议写入assets/styles/index.css中，并在main.js中引入

也可直接写在App.vue中