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>
