Vue中NProgress进度条使用教程

安装

npm安装

npm install --save nprogress

或CDN引入

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

官方地址：https://github.com/rstacruz/nprogress