vue项目中使用nprogress进度条

最新推荐文章于 2023-02-14 14:35:08 发布

leo_neverGiveUp

最新推荐文章于 2023-02-14 14:35:08 发布

阅读量637

点赞数

文章标签： nprogress vue中使用nprogress 页面进度条

本文链接：https://blog.csdn.net/weixin_43915587/article/details/96480516

版权

安装nprogress:

npm install --save nprogress

引入（以router.js为例）：

import NProgress from "nprogress";
import "nprogress/nprogress.css";

全局路由守卫中监听页面的跳转：

// 路由守卫
router.beforeEach((to, from, next) => {
  if (to.path !== from.path) {
    NProgress.start();
  }
  next();
});

router.afterEach(() => {
  // 关闭进度条提示
  NProgress.done();
});

如果想更改进度条与小圆圈的颜色，app.vue中：

#nprogress .bar {
  background: red !important;
}
#nprogress .spinner-icon {
  border-top-color: red !important;
  border-left-color: red !important;
}