vue中的进度条

Posted maxiag

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中的进度条相关的知识,希望对你有一定的参考价值。

①首先需要安装依赖 
npm install --save nprogress
如果是vue cli3 需要在 依赖中 安装 nprogress 即可
②使用
 一: 首先要在router文件的index.js中引入需要的包
import NProgress from ‘nprogress‘
import ‘nprogress/nprogress.css‘
二:使用 在导航守卫中使用
router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})
三: 改变颜色
在app.vue中设置即可
 #nprogress .bar {
      background: red !important; //自定义颜色
    }
 
 
 

以上是关于vue中的进度条的主要内容,如果未能解决你的问题,请参考以下文章

当片段视图加载是异步任务的一部分时,如何在片段加载之前显示进度条?

自定义对话框片段内的进度条 - 如何从 AsyncTask 传递进度?

vue中的进度条

在recyclerview片段Reandroid中屏幕旋转后进度条不显示

css Bootstrap 3进度条片段

vuevideo进度条样式乱