别小瞧这进度条，在前端开发里它简直是个宝!一眼就能看明白上传啊、加载啊、网页全开那些事。最近大火的Vue也来插上一脚，不要太好用！赶紧学学怎么用Vue做出个进度条呗，还有现成的实例代码可以参考！

一、准备工作

搞Vue的进度条加载，三步就成！首先得安好Vue开发环境，装个VueRouter和ProgressBar这俩小助手。有了它们，网页就能随意跳啦；再说那个ProgressBar，就是解决进度条问题的。这下，页面加载过程是不是一目了然呀？

搞定项目，首先得备齐工具！就像吃饭用筷子开车握方向盘一样，你只需简单地摆弄npm或者yarn这俩小助手，分分钟装上Vue Router和ProgressBar等插件，项目就能顺畅跑起来啦～

二、创建进度条组件

搞定进度条？那就跟拼装小玩具似的。下载时现身，任务完成后丢一旁。直接用咱熟稔的Vue组件文件（.vue）搞定，再来点儿炫酷的HTML和CSS样式，进度条就齐活了！

有时候在组件里面看到个叫”波形条”的小玩意儿，它可以帮你随意调整色彩和线条，甚至模拟下载进度！是不是觉得有点儿像我们小时候玩的翻花绳呀？轻轻扯动一下波形条就知道下载快不快了，进度一目了然

三、控制进度条显示与隐藏

给vue实例加个方法，进度条立马变神奇！想见就见，不喜欢就藏起来。进度显示随心所欲，开心最重要啦～

vue create progress-bar-demo
cd progress-bar-demo
npm install vue-router
npm install vue-progressbar

别小瞧这个Methods，其实是个打杂工，负责边界展示跟进度啥的。还有喔，这种小玩意甚至能帮Methods完成网页下载的任务！所以，我们就得想好名字，只有设定对了参数，进度条和其他功能才能顺畅。

四、全局前置守卫

想要上网更快？试试给网页加个全局插图！这样你就可以时刻了解路由动态，换页哦也能看到进度条，知道有没有卡住~

  

    
    
    
  

  

import VueProgressBar from 'vue-progressbar'
  
export default {
  name: 'App',
  components: {
    VueProgressBar
  },
  // ...
}

咱们这工具箱里头有个叫`beforeEach()`的神奇小功能，它能感知路由的变动。每当这时候，直接让他挑选要用哪个办法开始处理网站，就这么简单明了！这样一来，咱们就能随心所欲地掌控网页翻页的模样诶，浏览起来爽爆！

五、手动控制加载进度

路由器老是卡，翻新网页等半天？不用怕，只需要在设置中加几个参数，打个勾就能解决。电脑自动帮忙控制进度，轻轻松松就把下载搞定！

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueProgressBar from 'vue-progressbar'
  
Vue.use(VueRouter)
  
const progressBarOptions = {
  color: '#29d',
  failedColor: 'red',
  thickness: '3px',
  transition: {
    speed: '0.5s',
    opacity: '0.6s',
    termination: 300
  },
  autoRevert: true,
  location: 'top',
  inverse: false
}
  
const router = new VueRouter({
  mode: 'history',
  routes: [
    // ...
  ]
})
  
router.beforeEach((to, from, next) => {
  VueProgressBar.start()
  next()
})
  
router.afterEach(() => {
  Vue.nextTick(() => {
    VueProgressBar.finish()
  })
})
  
export default router

看好了咱就把 Home.vue 里的 handleClick 方法加上去，这样更新状态栏的速度可不比用手点启动下载慢。以后不论你想按下哪个按钮或有何动作，只需要调用 handleClick 方法，无论何时都能知道页面加载进度了

六、总结

看这里，妙招在手，Vue进度条随心所欲！不论下载、上网还是切换页面，进度一清二楚，方便快捷，用户感觉超棒！这下子，你的进度条就是用户心中的那道光！简单明了，让人一眼就明了。

说实话，搞得Vue的进度条加载飞快的办法其实挺好使的。你要是正琢磨这事的Vue项目，别慌，看看刚才说的那些，特别简单！就几招搞定，比如全局组件、守卫跟手工操控，效果好得很，炫酷的不得了！

聊到这。最近在网上浪些啥呀？能不能分享些特别厉害的网站？

  

    
Welcome to Home
    Start Progress
  

  

export default {
  name: 'Home',
  methods: {
    startProgress() {
      VueProgressBar.start()
      // 模拟加载进度
      setTimeout(() => {
        VueProgressBar.finish()
      }, 2000)
    }
  }
}

。