vue中进度条NProgress快速使用介绍

1. 安装

npm install --save nprogress

2. 引入

举例场景：路由拦截中使用
import router from "@/router/index";

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

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

  // 开始进度条
  NProgress.start();
  
});

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

  // 结束进度条
  NProgress.done();
  
});

3.最后展示效果

tips: vue2和vue3都能用