nprogress sets the top progress bar for the web page

First install nprogress as a running dependency.

Then go back to the main.js of the project and import nprogress and style files:

// 导入nprogress和对应的样式文件
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

The use of nprogress is quite simple:

NProgress.start();
NProgress.done();

The question is when to call these two methods?

We use axiosthe request interceptor and response interceptor to use:

// 挂载axios之前配置请求拦截器，配置显示进度条NProgress.start()
axios.interceptors.request.use(config => {
    
    
  NProgress.start()
  // 一定要return config
  return config
})

// 配置响应拦截器,隐藏进度条NProgress.done()
axios.interceptors.response.use(config => {
    
    
  NProgress.done()
  return config
})

// 挂载axios到Vue的原型对象上，这样每个vue的组件都可以通过$http直接访问到axios从而发起ajax请求
Vue.prototype.$http = axios

This is configured