NProgress

网络加载进度条

导入

1
2
3
/* nprogress */
import NProgress from "nprogress";
import "nprogress/nprogress.css";

配置

1
2
3
4
5
6
7
NProgress.configure({
  easing: "ease", // 动画方式
  speed: 500, // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3, // 初始化时的最小百分比
});

使用

1
2
3
4
5
6
7
8
9
10
11
12
router.beforeEach((to, from, next) => {
  // 每次切换页面时，调用进度条
  NProgress.start();

  next();
});

router.afterEach(() => {
  // 在即将进入新的页面组件前，关闭掉进度条
  NProgress.done();
});