Vue 集成Nprogress.js进度条分析

符号 阅读:246 2021-03-31 13:26:00 评论:0

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

 

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号