Vue 集成Nprogress.js进度条

亦凉 2023-10-10 11:54 61阅读 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
    })