Vue中配置页面加载进度条

目录

🎉应用场景

 🎉在Vue中使用

1.安装nprogress

2.配置进度条

3.配置进度条的颜色

4.其他配置选项

🎉结语 

---

🎉应用场景

像页面中的这种加载进度条的效果，可以更好为用户提供视觉上的反馈，让他们知道应用正在加载数据或执行一些操作。这提高了用户体验，因为用户可以清晰地看到应用程序的活动状态。

 🎉在Vue中使用

1.安装nprogress

首先我们用到的包是nprogress

可以看到虽然这个包是9年前的了，但是一周的下载量还是有一百多万，可想而知这个功能在开发中的作用是非常常用的。

使用npm安装

npm i nprogress

2.配置进度条

首先我们要想好配置在哪个地方，其实比较好的选择是配置在路由鉴权中，因为路由切换时经常伴随着异步加载数据、组件等操作，这些操作可能需要一些时间，而加载进度条可以在此期间提供用户友好的反馈。通过在路由拦截中配置加载进度条，你可以掌握整个应用程序的加载状态，以及在路由之间切换时的进度。

 我们可以新建一个文件来写路由鉴权，最后在main.js中引入即可

//路由鉴权
import router from '@/router/index.js'
import nProgress from 'nprogress'
import 'nprogress/nprogress.css' //引入进度条样式
//全局前置守卫
router.beforeEach((to, from, next) => {
  nProgress.start()   //进度条开始
  next()
})

//全局后置守卫
router.afterEach((to, from) => {
  nProgress.done()  //进度条结束
})

这样子，进度条就可以使用了。

3.配置进度条的颜色

直接找到样式文件对其修改一下是最简单的

加载旋转icon样式

4.其他配置选项

minimum： 设置进度条的最小百分比。默认值为 0.08。当进度小于这个值时，进度条将被隐藏。

NProgress.configure({ minimum: 0.2 });

ease： 设置进度条的缓动方式。默认值为 'linear'，可以设置为 'ease' 或 'ease-in-out' 等。

NProgress.configure({ easing: 'ease');

speed： 设置进度条的速度。默认值为 200，表示以毫秒为单位的动画持续时间

NProgress.configure({ speed: 500 });

showSpinner： 设置是否显示进度条右侧的旋转小圆圈。默认值为 true。

NProgress.configure({ showSpinner: false });

parent： 设置进度条的父元素。可以指定一个 CSS 选择器，将进度条附加到指定的父元素。

NProgress.configure({ parent: '#custom-container' });

trickle 和 trickleRate： 控制进度条渐进加载的方式。trickle 设置是否启用渐进加载，默认值为 true。trickleRate 设置每秒增加的进度百分比，默认值为 0.02。

NProgress.configure({ trickle: true, trickleRate: 0.02 });

🎉结语 

还有更多的配置与玩法可以参考文档

参考文档