vue 项目 添加 页面上方 NProgress进度条

NProgress官网和Github地址

路由 跳转时 页面上方 和 右上角 会有一个加载进度

安装

使用npm安装

npm install --save nprogress

基本用法

main.js 引入

import NProgress from “nprogress”;
import “nprogress/nprogress.css”;

开关和关闭

	start()开启NProgress进度条
	done()关闭NProgress进度条

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

请求拦截里进行应用

// 配置请求的根路径
axios.defaults.baseURL = 'http://……'
// 请求拦截
axios.interceptors.request.use(config => {
  // 在 request 拦截器中，展示进度条 NProgress.start()
  NProgress.start()
  // console.log(config);
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 最后必须  return config
  return config
})
// 在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})