Vue中NProgress进度条使用教程

npm install --save nprogress

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

// 导入nprogress.js
import NProgress from 'nprogress';
// 导入nprogress的样式
import 'nprogress/nprogress.css';

// 定义路由导航前置守卫
router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});
// 定义路由导航后置守卫
router.afterEach((to, from) => {
  NProgress.done();
});