vue中使用noprogress插件

nprogress 插件是在页面刷新和跳转时出现在浏览器顶部的进度条，它会随着页面的加载而显示进度状态。
效果图如下：（点击时候红色闪动部分就是效果图，特意样式为红色方面查看）

1.首先安装

npm install --save nprogress

2.在utils中创建一个nprogress.js文件

import router from '@/router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'   //引入样式

router.beforeEach((to,from,next)=>{
    NProgress.start()
    next()   //进度条开始
})

router.afterEach((to,from,next)=>{
    NProgress.done()   //进度条借宿
})

3.在app.vue中修改样式即可

补充：还可以在响应拦截器里面去使用（推荐上面一种，此种方法不推荐）