nprogress配合全局路由守卫实现进度条业务

一、配置全局路由守卫

1-1、创建src/authentication.ts

// 引入router
import router from '@/router'
// 类型定义
// 全局前置守卫
router.beforeEach((to:any,from:any,next:any)=>{
    // to:将要访问哪一个路由
    // from:从哪一个路由来
    // next：放行路由
    next()
})
// 全局后置守卫
router.afterEach((to:any,from:any,next:any)=>{

})

1-2、入口文件引入authentication.ts

// 引全局路由守卫
import '@/authentication'

二、安装nprogress插件

npm i nprogress

三、authentication.ts中引入使用

// 引入router
import router from '@/router'
// 引入nprogress
import nprogress from 'nprogress'
// 引入nprogress样式
import 'nprogress/nprogress.css'
// 类型定义


// 全局前置守卫
router.beforeEach((to:any,from:any,next:any)=>{
    // to:将要访问哪一个路由
    // from:从哪一个路由来
    // next：放行路由
    nprogress.start()
    next()
})
// 全局后置守卫
router.afterEach((to:any,from:any,next:any)=>{
    nprogress.done()
})

四、修改进度条样式（找到nprogress.css）

#nprogress .bar {
  background-image: linear-gradient(to right,rgb(238, 69, 69),rgb(166, 244, 8),rgb(38, 214, 68),green);
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}