vue顶部进度条配置——NProgress

1、安装NProgress

npm install --save nprogress

2、使用NProgress

• 哪里需要展示进度条放在哪里

// 引入nprogress
import NProgress from "nprogress";
// 引入nprogress 样式
import "nprogress/nprogress.css";

• 例如：跳转路由时

• NProgress.start();  进度条开始读取

• NProgress.done();  进度条结束读取

router.beforeEach(async (to, from, next) => {
  NProgress.start();
  if (hasToken) {
    if (to.path === "/login") {
      // 如果已登录，跳转首页
      next({ path: "/" });
      NProgress.done();
    } 
  }
});

router.afterEach(() => {
  NProgress.done();
});

3、自定义进度条样式

#nprogress .bar {
  background: red !important;
  height: 8px;
}