nprogress - 页面顶部细长的进度条插件

这是一个类似youtube、Medium等网站上的小进度条插件。页面切换的时候顶部会出现一个细长的表示页面加载进度的进度条。

一、安装

npm install --save nprogress

二、使用

比如用在 SPA Vue 项目页面切换的时候：

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

// 路由前置守卫：页面跳转前执行
router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});

// 全局后置钩子：页面跳转完后执行
router.afterEach(() => {
  NProgress.done();
});

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

三、语法

NProgress.start();
NProgress.done();
NProgress.remove();

NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()

// 随机增长进度条，这个方法永远不会让进度条达到100%
NProgress.inc();

四、进度条配置

详情请见github