nprogress使用

安装 nprogress

npm install --save nprogress

引入 nprogress文件和样式

//引入js文件
import nProgress from "nprogress"

//引入样式
import 'nprogress/nprogress.css'

在项目中根据项目要求修改样式（App.vue / App.css）

#nprogress .bar{
    background: red !important;
}

在请求时使用nprogress

mounted(){
    // 进度条开始
    nProgress.start()
    axios.get("/test").then(res=>{
        this.list = res.data.data
        //进度条结束
        nProgress.done()
    })
}

在路由时使用nprogress

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()   //进度条结束
})