vue3使用NProgress頂部進度條

NProgress是一個輕量級的進度條組件，在Github上已經2.4萬star數了，雖然這個組件已經好久沒有更新了，最近一次更新是20年4月份，改了jQuery的版本，但是該組件的使用頻率還是高的。

插件安裝

 $ npm install --save nprogress 
 $ yarn add nprogress

插件使用

App.vue

<script lang="ts">
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    router.beforeEach((to, from, next) => {
      NProgress.start();
      next();
    });
    router.afterEach(() => {
      NProgress.done();
    });
  },
};
</script>

axios中使用

main.ts

import 'nprogress/nprogress.css'

axios.ts

import NProgress from 'nprogress'

axios.interceptors.request.use(
  function (config: any) {
   // 在發送請求之前做某件事
    NProgress.start() //開始
    return config
  },
  (error: { data: { error: { message: any } } }) => {
    return Promise.reject(error.data.error.message)
  }
)


axios.interceptors.response.use(
  function (config: any) {
    aspShow.value = false
    NProgress.done() //結束
    if (config.status === 200 || config.status === 204) {
      return Promise.resolve(config)
    }
    return Promise.reject(config)
  },
  function (error: any) {
    aspShow.value = false
    NProgress.done() //結束
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登錄
        // 未登錄則跳轉登錄頁面，並攜帶當前頁面的路徑
        // 在登錄成功后返回當前頁面，這一步需要在登錄頁操作。
        case 401:
          router.replace({
            path: '/login',
            query: {}
          })
          break
       
        // 其他錯誤，直接拋出錯誤提示
        default:
          message.error(`${error.response.status}:${error.response.statusText}`)
      }
     
      NProgress.done()////結束
      return Promise.reject(error)
    }
    
  }
)

路由中使用

import NProgress from 'nprogress'

// 頁面切換之前取消上一個路由中未完成的請求
router.beforeEach((_to: any, _from: any, next: () => void) => {
  NProgress.start()
  next()
})
router.afterEach(() => {
  // 進度條
  NProgress.done()
})

全局配置

//全局進度條的配置
NProgress.configure({
  easing: 'ease', // 動畫方式
  speed: 1000, // 遞增進度條的速度
  showSpinner: false, // 是否顯示加載ico
  trickleSpeed: 200, // 自動遞增間隔
  minimum: 0.3, // 更改啟動時使用的最小百分比
  parent: 'body', //指定進度條的父容器
})

import NProgress from "nprogress";

shims-vue.d.ts

TS的項目，還需要安裝其類型聲明文件，命令如下：

npm i @types/nprogress -D

或者如下聲明

declare module 'nprogress';