Vue中使用NProgress插件(加载进度条)记录

灵魂三问

Q1:为什么要使用加载进度条?
A1:页面切换体验好一些! 然后个人觉得好看一些

Q2:如何使用?
A2:请看下面展示

Q3:如何控制?
A3:如下

效果如下

绿色的就是加载进度条的效果(箭头所示)

1.安装

npm install --save nprogress

2.使用

主要的API以及说明

(1)NProgress.start()  // 开启进度条
(2)NProgress.done()   // 关闭进度条
(3)NProgress.set(n)   // 设置进度条的百分比，其中 n 是 0 ~ 1 之间的数字
(4)NProgress.inc(m)    // 以随机量 m (m可以为小数)递增进度条，但永远不会达到 100%

tips: (1) (2) 为常用API , (3) (4) 有默认,可不设置

常用配置

NProgress.configure({
  easing: 'ease',  // 动画方式
  speed: 500,  // 递增进度条的速度
  showSpinner: false, // 是否显示右上角加载icon提示
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3 // 初始化时的最小百分比（默认0.08)
})

tips: 部分设置说明
speed 值越小跑的越快,跟计时器类似

样式修改

 #nprogress .bar {
    background: #46bd87 !important; // 自定义颜色(常用)
  }

tips: 一般写在app的style中 或者 base.css中

实际使用

在main.js中使用或者在route文件中使用
以下是在route文件夹的index.js中使用

import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入插件以及样式,类似element-UI的使用
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    name: 'HomePage',
    component: () => import('@/views/home/HomePage')
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})
// 进度条速度，一般不用控制自行加载
// NProgress.inc(0.2);
NProgress.configure({
  // easing: 'ease',  // 动画方式
  speed: 100, // 递增进度条的速度
  showSpinner: false // 是否显示加载ico
  // trickleSpeed: 200, // 自动递增间隔
  // minimum: 0.3 // 初始化时的最小百分比
})
// 在前置导航守卫中开启(main.js中一样)
router.beforeEach((to, from, next) => {
  NProgress.start() // 开启进度条
  next()
})
// 在后置导航守卫中开启(main.js中一样)
router.afterEach(() => {
  NProgress.done() // 关闭进度条
})

export default router