vue-progress-bar的使用

最新推荐文章于 2025-06-09 09:01:06 发布

kogmini

最新推荐文章于 2025-06-09 09:01:06 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端

本文链接：https://blog.youkuaiyun.com/csdnyp/article/details/123569793

vue 专栏收录该内容

20 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中安装和使用vue-progressbar组件，为页面路由跳转添加进度条效果。通过在main.js中全局注册并设置选项，以及在App.vue和router/index.js中监听路由变化来控制进度条的开始、结束和动态调整样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装：

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