介绍一个全局进度条nprogress第三方库

nprogress是啥嘞？

就是导航刷新是的这加载进度条：

我们要怎么用嘞？

先打开npm官网进行搜索：

https://www.npmjs.com/package/nprogress

nprogress是一个轻量级的进度条库，它提供了丰富的配置选项，也允许你定制样式。

首先先在终端下载：

npm i nprogress

 在main.js全局引入：

//头部的加载条
import 'nprogress/nprogress.css'

 封装一个进度条打开关闭组件：

//显示全屏loading
export function showFullLoading(){
    nprogress.start()
}
export function hideFullLoading(){
    nprogress.done()
}
//隐藏全屏loadin

在路由守卫中调用：

 

//处理权限验证相关的东西
import router from '~/router'
import { toast, showFullLoading, hideFullLoading } from '~/composables/util.js'


//全局前置守卫
router.beforeEach(async (to, from, next) => {
    //显示loading
    showFullLoading()
    next();

});
//全局后置守卫
router.afterEach((to, from) => {
    console.log(to, from);
    hideFullLoading()
})

 结束！

等等，现在又一个问题，我们要怎么改变这个进度条的样式嘞？

直接在App.vue里更改

/* 全局进度条 */
/* 一定要怎么写，不然没办法显示 */
#nprogress .bar{
  background-color: #979797!important;
  height: 3px;
}