自定义加载条和nprogress加载条插件使用

自定义加载条和nprogress加载条插件使用

一、自定义加载条
1、相关css （该单独写在style文件夹中，全局导入使用）

#global-loading {
    height: 4px;
    width: 0;
    // 渐变颜色（linear-gradient）
    background: linear-gradient(to right,rgb(79, 156, 243), rgb(144, 188, 240),rgb(40, 138, 250)) ;
    animation: gorw 2s infinite forwards;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
  }
@keyframes gorw {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

2、需求：在路由跳转加载完之前，出现加载条（导航守卫：beforeEach钩子函数）

// 导航守卫，所有的连接跳转都会在这执行一遍
// 跳转之前执行的路由守卫

router.beforeEach((to, from, next) => {
  let loadingBar = document.getElementById('global-loading')
  if (!loadingBar) {
    loadingBar = document.createElement('div')
    loadingBar.id = 'global-loading'
    document.body.append(loadingBar)
  } else {
    loadingBar.style.display = "block"
  }
  
  // 0.5秒之后再执行
  setTimeout(() => {
    next()
  },500)
})

3、需求：在路由跳转加载完成之后，关闭加载条（afterEach钩子函数）

// 不会接受 next 函数也不会改变导航本
// 跳转成功之后执行的钩子

router.afterEach(() => {
  let loadingBar = document.getElementById('global-loading')
  if (loadingBar) loadingBar.style.display = 'none'
})

二、使用nprogress插件加载条
1、安装：

npm install --save nprogress

2、用法：

//用法
NProgress.start();
NProgress.done();

3、使用:
可以在main.js中全局导入或者在request.js路由配置文件中导入

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

4、配置：

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})