前言：客户在访问网页的时候想要看到网页加载的进度，所以使用 nprogress 来实现当页面跳转是出现在浏览器顶部的进度条，它是轻量级的进度条组件，使用简便，可以很方便集成到应用中来。
效果：
一、参考资料
官网：https://ricostacruz.com/nprogress/ github：https://github.com/rstacruz/nprogress
二 、安装 nprogress
// 使用npm 或者yarn 安装 npm install --save nprogress yarn add nprogress三、使用(2种方式引入)
//使用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() })五、进度条样式修改
// 在app.vue中 #nprogress .bar { height: 10rpx !important; //高度 background: #000000 !important; //颜色 }六、其他参数
可以通过调用 .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}) //最小百分比
