在网页加载的页面是一片空白，加一个进度条点缀一下，不让用户感到枯燥 效果：

安装：

npm install --save nprogress

使用

首先在main.js中引入nprogress.css

// mian.js
// 引入进度条css  
import 'nprogress/nprogress.css'

在路由守卫中使用

// 引入NProgress
import NProgress from 'nprogress/nprogress.js'
// 全局前置守卫
router.beforeEach( (to, from, next) => {  
    NProgress.start()
next()  
})  
// 全局后置守卫
router.afterEach(() => {  
    NProgress.done()
})

颜色：

进度条的默认颜色是蓝色，可能会与我们的网站风格不一致，下面来更改进度条的颜色，有两种方法

方法1：

在node_modules文件夹中更改

在nprogress文件夹中找到nprogress.css

找到#nprogress .bar和#nprogress .peg进行更改

方法2：
在App.vue中重写进度条颜色的css

或者在全局css文件中重写

// 进度条颜色更改成橙色
#nprogress .bar{  
background-color: orange!important;  
}  
  
#nprogress .peg{  
box-shadow: 0 0 10px orange, 0 0 5px orange!important;  
}