nprogress 使用-526互联

# https://www.npmjs.com/package/nprogress
pnpm i nprogress


// main.js
import 'nprogress/nprogress.css'

// App.vue 自定义一下loading的滚动条样式
<style>
#nprogress .bar {
  background: #f4f4f4!important;
  height: 3px!important;
}
</style>

// util.js 滚动条全局工具
// 显示全屏Loading
export function showFullLoading(){
  nProgress.start()
}
// 隐藏全屏Loading
export function hiddeFullLoading(){
  nProgress.done()
}

// permission.js 通过路由守卫完成
// 前置路由守卫开启loading
router.beforeEach(async (to, from, next) => {
  // 切换路由显示Loading
  showFullLoading()

// 全局后置守卫，渲染完网页之后终止loading
router.afterEach((to, from) => hiddeFullLoading())