vue项目 页面进度条实现 Nprogress

安装：
npm i Nprogress -S

在main.js中引入：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

在路由导航守卫中使用：

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

Nprogress.configure({ showSpinner: false }); // showSpinner：进度环显示隐藏

router.beforeEach((to, from, next) => {
  // 开始进度条
  Nprogress.start();
  ...
  next()
});

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

如果本文对你有帮助，请点个赞吧！