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 configreturn config
})
// 在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {NProgress.done()return config
})