Vue给项目添加进度条

前言

在PC端项目的开发过程中，有时我们需要给项目添加一个进度条来展示界面是否已经完成加载的情况。那么如何才能成功添加进度条呢？

添加方式

用法1: 在拦截器中使用
1.引入插件Nprogress

npm install --save nprogress

2.在main.js中引入对应的包文件

import NProgress from ‘nprogress’
import ‘nprogress/nprogress.css’

3.展示进度条，我选择的时间是发送request请求的时候展示（因为我的界面使用了created钩子函数去获得后端的数据，也可以写在路由跳转之前展示）

axios.interceptors.request.use(config => {
NProgress.start()
return config
})

3.隐藏进度条，在response拦截器中隐藏（证明已经返回了数据，界面已经加载）

axios.interceptors.response.use(config => {
NProgress.done()
return config
})

4.附上该插件的GitHub地址，里面有使用的详细信息
https://github.com/rstacruz/nprogress

用法2: 在路由跳转之前展示
1,安装

npm install NProgress --save--dev

2,调用

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

3,配置

NProgress.configure({ showSpinner: false }); // 去掉右侧加载圆圈
 
//切换页面的时候调用
router.beforeEach((to, from, next) => {
  NProgress.start(); // start progress bar
  next();
});
 
router.afterEach(() => {
  NProgress.done();
});