progress的词组（NProgress的用法）

最近 
  
  
  
  
  ，应该很多小伙伴都找到前端开发的工作了吧 
  
  
  
  
  。怎么样？工作中的代码是不是比机构学的代码复杂很多倍？

比如说 router里面的路由钩子函数是不是比学习的时候复杂很多倍？还有vuex模块是不是会见到许许多多的文件夹 
  
  
  
  
  
 ，每个文件夹里面有很多文件的那种？是不是见到了很多的第三方模块？等等等等 
  
  
  
  
  
 。今天

 


 


 


 


 


，我就从简单点的模块说起吧

 


 


 


 


 


。

大家打开一个网页的时候 
 
 
 
 
 ，会看到一个进度条 
   
   
   
   
   
 ，然后加载完成后进度条就消失了 
 
 
 
 
 。这个呢
 

 

 

 

 

，就是一个第三方的进度条库
 

 

 

 

 

 ，叫做nprogress.

1.首先安装nprogress(咱直接用npm安装了) : npm install --save nprogress

2.然后在 router/index.js里写上以下几行代码

import NProgress from "nprogress"; // 导入 nprogress模块

import "nprogress/nprogress.css"; // 导入样式           ，否则看不到效果

NProgress.configure({ showSpinner: false }); // 显示右上角螺旋加载提示

3.继续 

 
 

 
 

 
 

 
 

 
 

，在下面声明完router(const router = new VueRouter({......}))后面写上路由钩子函数如下所示 
   
   
   
   
   
 。

router.beforeEach((to, from, next) => {

NProgress.start(); //开启进度条

//中间写其他的项目中所需要的一些代码










，例如有些网页只有登录了才能进                 ，在这里可以做出判断 
 
 
 
 
 
 
 
 
 
 
，判断完了满足要求后就可以放行 next()

next();

});

router.afterEach(() => {

NProgress.done(); //完成进度条

});

4.这个呢
















，基本上会这几个api就足够了           ，我们用的最多的就是这几个 
  
 
  
 
  
 
  
 
  
 
 ，NProgress.start()开启进度条











，NProgress.done()完成进度条 
  
  
  
  
  ，如果我们想改变进度条的颜色 
  
  
  
  
  
 ，可以进入App.vue里

 


 


 


 


 


，在style中加上下面这样几行代码即可
 

 

 

 

 

。

#nprogress .bar {

  background: blue !important;    //这里可以随便写颜色

}

如图所示 
 
 
 
 
 ，这样一个进度条就完成了

 讲完了 
   
   
   
   
   
 ，别忘了动动手写一写哦
 

 

 

 

 

，See you next time!