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;
}