Vue系列之顶部进度条（NProgress）

秒速五厘米 2023-07-06 11:45 69阅读 0赞

一、Vue顶部进度条（实战）  
1、安装nprogress插件

1.  本地引入

1.  npm或bower安装

npm install --save nprogress
    	bower install --save nprogress

2、在main.js中配置nprogress

//导入进度条插件
    	import NProgress from 'nprogress'
    	import 'nprogress/nprogress.css'
    
    	//全局进度条的配置
    	NProgress.configure({ 
    	  showSpinner: true,  //加载微调器设置,默认为true
    	  //使用缓动（CSS缓动字符串）和速度（以毫秒为单位）调整动画设置。（默认：ease和200）
    	  easing: 'ease',
    	  speed: 2000,
    	  minimum: 0,  //更改启动时使用的最小百分比
    	})
    
    	//对路由钩子函数进行设置
    	//路由进入前
    	router.beforeEach((to, from , next) => {
    	  NProgress.start();
    	  next();
    	});
    	//路由进入后
    	router.afterEach(() => {  
    	  NProgress.done()
    	})

3、效果图  
![NProgress效果图][NProgress]  
二、文档（收藏）  
1、精简的main.js配置

import NProgress from 'nprogress'
    	import 'nprogress/nprogress.css'
    	
    	NProgress.configure({ showSpinner: false })
    	
    	router.beforeEach((to, from, next) => {
    	  NProgress.start();
    	  next();
    	})
    	
    	router.afterEach(() => {
    	  NProgress.done();
    	})

2、官方文档  
![NProgress使用][NProgress 1]  
Demo网址：[http://ricostacruz.com/nprogress/][http_ricostacruz.com_nprogress]  
GitHub: [https://github.com/rstacruz/nprogress][https_github.com_rstacruz_nprogress]

[NProgress]: https://img-blog.csdnimg.cn/20200218154823475.png
[NProgress 1]: https://img-blog.csdnimg.cn/20200218153650581.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjY0OTk5,size_16,color_FFFFFF,t_70
[http_ricostacruz.com_nprogress]: http://ricostacruz.com/nprogress/
[https_github.com_rstacruz_nprogress]: https://github.com/rstacruz/nprogress