Vue：页面加载进度条

这段时间在踩Ant design pro Vue的坑，发现了个在手机端页面上经常出现的，加载进度条，效果蛮不错的！记录下来。

 

cnpm install --save nprogress

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


NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
    NProgress.start();
    next()
});

router.afterEach(transition => {
	NProgress.done();
});

配置插件

通过 minimum 来修改最小百分比。

NProgress.configure({ minimum: 0.1 });

你可以通过 template 修改标记结构。为了保证进度条正常工作，需要一个包含 role='bar' 属性的元素。

NProgress.configure({

template: "..."

});

 

通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed （毫秒ms）。

NProgress.configure({ ease: 'ease', speed: 500 });

想关闭进度条步进？设置 trickle 为 false。

NProgress.configure({ trickle: false });

你可以调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔，单位毫秒ms).

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

想禁用进度环？设置 showSpinner 为 false。

NProgress.configure({ showSpinner: false });

 

这些配置个人感觉用处不大，但是记载下来比较好！

因为就是需要用加载进度，所以只需设置一个 showSpinner 为 false 比较好。

 

附带一个效果图！