1、安装vue-progressbar  npm i vue-progressbar --save

2、在main.js中引入

      import VueProgressBar from 'vue-progressbar'

       Vue.use(VueProgressBar, {

              color: '#1890ff',  // 进度条颜色

              failedColor: 'red', // 失败显示的颜色

              height: '2px'  // 进度条高度

})

3、在vue组件中使用

<template>

  <div id="app">

    <router-view></router-view>

    <vue-progress-bar></vue-progress-bar>

  </div>

</template>

<script>

export default {

name: 'app',

created () {

this.$Progress.start()

this.$router.beforeEach((to, from, next) => {

    if (to.meta.progress !== undefined) {

    let meta = to.meta.progress

    this.$Progress.parseMeta(meta)

    }

    //  start the progress bar

    this.$Progress.start()

    //  continue to next page

    next()

})

this.$router.afterEach((to, from) => {

  //  finish the progress bar

  this.$Progress.finish()

})

}

}

</script>