vue 加载进度条 nprogress 具体使用步骤

1. 安装 nprogress

npm install nprogress --save

2. 在 src/utils 文件夹下创建 nprogress.js，nprogress.js内容如下：

import router from '@/router' // 必须引入router
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' // 注意必须要引入css样式文件

router.beforeEach((to, from, next) => {
  NProgress.start() // 进度条开始
  next()
})

router.afterEach(() => {
  NProgress.done() // 进度条结束
})

// 进度条的配置项：ease可以设置css3动画，如ease，linear；speed是进度条从开始到结束的耗时
// NProgress.configure({ease:'linear',speed: 300}); // 可写可不写

3. 在 main.js 中引入nprogress.js文件

import '@/utils/nprogress'

4. 在 App.vue 中修改进度条颜色

#nprogress .bar {
    background: #0070cc; // 进度条颜色
}
#nprogress .spinner {
    display: none; // 进度条加载的右边的圆圈让不显示
}

5. 效果如下：