2 01.全局loading进度条实现

• 安装

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

npm install --save nprogress

• 引入入口文件

// main.js

import 'nprogress/nprogress.css'

• 封装进度条

// src/composables/util.js

...略
// 显示全屏 loading
export function showFullLoading() {
    nprogress.start()
}

// 隐藏全屏 loading
export function showFullLoading() {
    nprogress.done()
}

• 全局前后守卫中使用

import { toast,showFullLoading,hideFullLoading } from '~/composables/util'

//前置守卫
router.beforeEach(async (to, from, next) => {

    showFullLoading()
})


//后置守卫
router.afterEach((to,from)=> hideFullLoading())

• 自定义加载颜色

App.vue

<style>

#nprogress .bar {
  background-color: #f4f4f4 !important;
  height: 3px !important;
}

</style>