Vue nprogress页面加载进度条

1. 安装

npm i nprogress

2.配置 nprogress

新建utils/nprogress文件中

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
 
//全局进度条的配置
NProgress.configure({ 
    easing: 'ease',  // 动画方式    
    speed: 1000,  // 递增进度条的速度    
    showSpinner: false, // 是否显示加载ico    
    trickleSpeed: 200, // 自动递增间隔    
    minimum: 0.3 // 初始化时的最小百分比
})
 
// 打开进度条
export const start = ()=>{
    NProgress.start()
}
 
// 关闭进度条
export const close = ()=>{
    NProgress.done()
}

3.使用

import { close, start } from '@/utils/nprogress'
//  导航守卫文件，全局前置导航守卫
export const beforeEach = to => {
  start()
 }
 
 //  导航守卫文件，全局后置导航守卫
export const afterEach = () => {
  close()
  // console.log('后置守卫')
}

4.改变颜色

// App.vue中
#nprogress .bar {
  background: var(--theme-color) !important; //自定义颜色
}