nprogress加载进度条

什么是nprogress:

项目每个路由执行的时候，在顶部显示一个进度条，明确告知用户程序正在执行，提高用户体验。

进度条库是前端中常见的库之一。

nprogress是轻量级的ajax进度条应用，灵感来自Google, YouTube, and Medium。

纳米级的进度条。 具有逼真的动画涓涓细流来说服你的用户，something is happen！

参考官网

http://ricostacruz.com/nprogress/

https://www.npmjs.com/package/nprogress

参考学习网站

主要使用方法：

NProgress.start() - 显示进度条,稍微增加【显示】
NProgress.set(0.4) - 设置百分比【显示】
NProgress.inc() - 显示进度条,稍微增加【显示】
NProgress.done() - 完成进度(进度条消失)【关闭】

项目应用步骤：

1. 安装：

   npm i nprogress
   

2. 引入：

   在router路由文件中对 js和css文件做引入

   // 引入nprogress相关的js和css文件
   import NProgress from 'nprogress'
   import 'nprogress/nprogress.css'
   

3. 使用：

   • 在router路由中做具体配置，在 前置路由守卫处开启进度条 beforeEach()

   // 开启进度条
   NProgress.inc()
   

   • 在 后置路由守卫 处关闭进度条 afterEach()

   // 完成进度条显示
   NProgress.done()
   

   路由除了有前置路由守卫，还有后置路由守卫，就是路由执行完毕(页面加载好了)要做一些事情。

注意：

如果对进度条的样式有修改的需要，可以操作如下文件达成：

node_modules\nprogress\nprogress.css