客户在访问网页的室友想要看到网页加载的进度,所以使用 nprogress 来实现浏览器顶部的进度条,它是轻量级的进度条组件,使用简便,可以很方便集成到应用中。
- 安装 nprogress
// 使用npm 或者yarn 安装
npm install --save nprogress
yarn add nprogress
- 使用
//第一种方法
//使用script 和link 引入对应文件
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
//第二种方法
// 全局引入 在main.js中引入nprogress插件和样式,
import NProgress from ‘nprogress’
import ‘nprogress/nprogress.css’
- 在路由中添加nprogress
NProgress.configure({ showSpinner: false })
//在路由跳转前用NProgress.start()标记下进度条开始
router.beforeEach((to, from, next) => {
NProgress.start()
next()
});
//在路由跳转后用NProgress.done()标记下结束
router.afterEach(() => {
NProgress.done()
})
//或
//在请求拦截其中设置 nprogress.start()
//在响应拦截器中设置 nprogress.end()
- 其他参数修改
可以通过调用 .set(n)来设置进度,n是0-1的数字。
NProgress.set(0.0); // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0); // Sorta same as .done()
可以使用inc()随机增长进度条,注意,这个方法永远不会让进度条达到100%。
NProgress.inc();
NProgress.configure({ showSpinner: false }) //禁用进度环
NProgress.configure({ trickle : false }) //关闭进度条步进
NProgress.configure({ trickleRate : 10}) //每次步进增长多少
NProgress.configure({ trickleSpeed : 200}) //每次步进间隔,单位毫秒ms
NProgress.configure({ easing: 'linear'}) //动画方向
NProgress.configure({ speed : 10}) //动画速度,单位毫秒ms
NProgress.configure({ minimum : 0.08}) //最小百分比