vue-progress-bar的使用

安装：

yarn add  vue-progressbar --save
或者
npm i vue-progressbar --save

使用：

//main.js
import Vue from 'vue'
import VueProgressBar from 'vue-progressbar'
const options = {
    color: '#F5F7FA',
    failedColor: '#874b4b',
    thickness: '2px',
    transition: {
        speed: '0.2s',
        opacity: '0.6s',
        termination: 300
    },
    autoRevert: true,
    location: 'top',
    inverse: false
}

Vue.use(VueProgressBar, options)

//App.vue
<template>
    <div id="app">
        <vue-progress-bar></vue-progress-bar>
        <router-view />
    </div>
</template>
<script>
	export default {
        name: 'App',
        mounted () {
            //  [App.vue specific] When App.vue is finish loading finish the progress bar
            this.$Progress.finish()
        },
        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()
            })
            //hook the progress bar to finish after we've finished moving router-view
            this.$router.afterEach((to, from) => {
                //  finish the progress bar
                this.$Progress.finish();
            })
        },
    };
</script>

//router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
const router = new Router({
    routes: [
		    	{
		    		path: '/demo1',
		            component: () => import('../views/Demo1.vue'),
		            meta: {
			            title: 'demo1',
			            requiresAuth: true,
			            progress: {
					        func: [
					          {call: 'color', modifier: 'temp', argument: '#ffb000'},
					          {call: 'fail', modifier: 'temp', argument: '#6e0000'},
					          {call: 'location', modifier: 'temp', argument: 'top'},
					          {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
					        ]
      					}
		            }
		         },
		         {
		    		path: '/demo2',
		            component: () => import('../views/Demo2.vue'),
		            meta: {
			            title: 'demo2',
			            requiresAuth: true,
			            progress: {
					        func: [
					          {call: 'color', modifier: 'temp', argument: '#ffb000'},
					          {call: 'fail', modifier: 'temp', argument: '#6e0000'},
					          {call: 'location', modifier: 'temp', argument: 'top'},
					          {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
					        ]
      					}
		            }
		         },
         ]
})
export default router