vue中使用npm 命令安装的nprogress以及如何修改颜色/位置

1.安装

npm install --save nprogress
或者
yarn add nprogress

2.使用

在router.js中

//导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//在路由守卫中可以直接使用使用下边的四个方法

3.方法

1. NProgress.start() — 开始出现进度条
2. NProgress.set(0.4) — 设置百分比
3. NProgress.inc() — 递增
4. NProgress.done() — 进度条结束

4.在守卫中使用

独享守卫开始

beforeEnter: (to, from, next) => {
      NProgress.start()
      next()
    },

路由结束触发

router.afterEach((to, from, next) => {
  NProgress.done()
})

5.修改样式

打开项目文件夹

搜索nprogress

结果

打开css修改样式