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 
})