NProgress实现全局loading效果

安装依赖包

npm i nprogress

封装到工具库

import nprogress from "nprogress"

//全局loading效果
export function showLoding(){
    nprogress.start()
}
//隐藏全屏loading
export function hideLoding(){
    nprogress.done()
}

在路由守卫中全局使用

import {showLoding,hideLoding} from '@/utils/utils'

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

//全局后置守卫
router.afterEach((to, from) => {
    hideLoding()
})

在app.vue中修改样式

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