vue项目中切换组件时动态进度条

前言

这是一般的vue项目中都会有的切换组件的顶部进度条，挺好看的，也很炫酷
先看一下是什么样子的

就是这个蓝色条条，现在我们来实现它

一、在项目中安装

npm install --save nprogress

二、在main.js中配置

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({
  easing: 'ease',  // 动画方式
  speed: 500,  // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3 // 初始化时的最小百分比
})
router.beforeEach((to, from, next) => {
    NProgress.start();
    NProgress.inc();
});
router.afterEach(() => {
  NProgress.done()
})

结语

也是非常的无脑，简单，把这些代码加上就有了