vue页面跳转时的进度状态

vue项目中要求页面跳转的时候在页面头部显示一个进度条：
实现：使用 nprogress

1、 安装：

npm install --save nprogress
或者
yarn add nprogress

2、 直接引入js、css或者通过cdn引入

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

3、方法

// 直接调用 start()或者done()来控制进度条。
NProgress.start();
NProgress.done();

// 可以通过调用 .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();

// 通过使用done()让进度条关闭。
NProgress.done(true);

4、配置

1. 最小值minimum
   配置最小的百分比。（默认值：0.08）

NProgress.configure({ minimum: 0.1 });

2. 模板template
   您可以使用更改标记template。要使进度条保持工作状态，请role='bar’在其中保留一个元素。请参阅默认模板 以供参考。

NProgress.configure({
  template: "<div class='....'>...</div>"
});

3. CSS动画属性 easing 和 speed
   使用缓动（CSS缓动字符串）和速度（以毫秒为单位）调整动画设置。（默认：ease和200）

NProgress.configure({ easing: 'ease', speed: 500 });

4. 自动递增 trickle
   通过将此设置为来关闭自动递增行为false。（默认值：true）

NProgress.configure({ trickle: false });

5. 进度条增加幅度和频率 trickleRate trickleSpeed
   单位分别是 百分比、毫秒

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

6. 右上角转圈动画 showSpinner

NProgress.configure({ showSpinner: false });

7. 父级容器parent
   指定父容器。（默认值：body）

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

配置：原文链接：https://blog.csdn.net/dreamstone_xiaoqw/article/details/106626417

5、 实现：

这里是要实现页面的进度状态，所以在vue项目的路由守卫中使用

import NProgress from 'nprogress' 
import 'nprogress/nprogress.css'

NProgress.configure({ showSpinner: false }) 

router.beforeEach(async (to, from, next) => {
	NProgress.start()
	....
})

router.afterEach(() => {
    // finish progress bar
    NProgress.done()
})

6、效果：