vue后台管理系统插件----nprogress 进度条

实现顶部进度条效果

nprogress   --进度条

介个是官网地址：NProgress: slim progress bars in JavaScript

使用：

1.安装：

npm：

npm install --save nprogress

yarn：

yarn add nprogress

2.使用：

只需调用start()和done()来控制进度条。

NProgress.start();//开始加载
NProgress.done();//加载完成

代码操作：

在main.js里面

// 浏览器顶部进度条
//引入进度条

import NProgress from 'nprogress';

import 'nprogress/nprogress.css';

NProgress.configure({

  easing: 'ease', // 动画方式

  speed: 500, // 递增进度条的速度

  showSpinner: false, // 是否显示加载ico

  trickleSpeed: 200, // 自动递增间隔

  minimum: 0.3 // 初始化时的最小百分比

});

//当路由进入前

router.beforeEach((to, from, next) => {

  // 每次切换页面时，调用进度条

  NProgress.start();

  // 这个一定要加，没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了

  next();

});

//当路由进入后：关闭进度条

router.afterEach(() => {

  // 在即将进入新的页面组件前，关闭掉进度条

  NProgress.done();

});

修改进度条颜色：

  #nprogress .bar {
      background: pink !important; //自定义颜色
    }