Vue 集成Nprogress.js进度条

Nprogress.js:

超小的全局顶部进度条

Nprogress.js如何使用

安装

cnpm i nprogress -S

引包

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

基本语法

NProgress.start() :显示进度条

NProgress.set(n):设置进度条的百分比，0~1之间

NProgress.inc():使进度条增加一个随机量（非100%），也可以传递一个增量值，会在当前基础上增加该值，最大0.994

具体实例:
NProgress.inc();
NProgress.inc(0.2);

NProgress.done():使进度条完成既满格

NProgress.remove():移除进度条

NProgress.configure(): 进度条配置对象，进度条配置对象具体参数如下：
minimum
开始时的最低百分比（默认0.08）
template
进度条自定义HTML，
easing & speed
动画设置，接收CSS3 缓冲动画字符串，以及动画速度
trickle
设置自动递增的默认行为（默认true）
trickleSpeed
进度条默认速度
showSpinner
是否显示右上角螺旋加载提示
parent
父容器（默认body）

具体实战：
NProgress.configure({
  mininum:0.1,
template: "<div class='....'>...</div>",
easing: 'ease', speed: 500,
trickle: false,
trickleSpeed: 200,
showSpinner: false,
parent: '#container'
})

Nprogress.js实战运用：在路由页面跳转时使用

import router from './router'
import store from './store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css' // Progress 进度条样式
import {getToken} from '@/utils/auth' // 验权
const whiteList = ['/login', '/404'] //白名单,不需要登录的路由
router.beforeEach((to, from, next) => {
  NProgress.start()  // 开始Progress
  if (getToken()) {
    //如果已经登录

    if (to.path === '/login') {
      next({path: '/'})
      NProgress.done() // 结束Progress
    } else if (!store.getters.role) {
      store.dispatch('GetInfo').then(() => {
        next({...to})
      })
    } else {
      next()
    }
  } else if (whiteList.indexOf(to.path) !== -1) {
    //如果前往的路径是白名单内的,就可以直接前往
    next()
  } else {
    //如果路径不是白名单内的,而且又没有登录,就跳转登录页面
    store.commit('RESET_USER')
    next('/login')
    NProgress.done() // 结束Progress
  }
})
router.afterEach(() => {
  NProgress.done() // 结束Progress
})