快捷導(dǎo)航

詳解如何在Vue3+TS的項(xiàng)目中使用NProgress進(jìn)度條

更新時(shí)間：2022年06月21日 15:15:37 作者：一碗周

本文主要介紹了詳解如何在Vue3+TS的項(xiàng)目中使用NProgress進(jìn)度條，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

寫在前面

NProgress是一個(gè)輕量級(jí)的進(jìn)度條組件，在Github上已經(jīng)2.4萬(wàn)star數(shù)了，雖然這個(gè)組件已經(jīng)好久沒(méi)有更新了，最近一次更新是20年4月份，改了jQuery的版本，但是該組件的使用頻率還是高的。

?? 在項(xiàng)目中安裝

這里的包管理工具使用的npm，如果你使用的是yarn或者pnpm，請(qǐng)自行更改安裝命令，安裝命令如下：

npm i nprogress -S

因?yàn)槲覀兪荰S的項(xiàng)目，還需要安裝其類型聲明文件，命令如下：

npm i @types/nprogress -D

?? 簡(jiǎn)單的封裝

現(xiàn)在我們對(duì)NProgress進(jìn)行一下簡(jiǎn)單的封裝，首先我們?cè)?code>utils目錄下創(chuàng)建要給nporgress.ts的文件，然后引入NProgress和CSS樣式文件，示例代碼如下：

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

然后我們對(duì)進(jìn)度條進(jìn)行一些基礎(chǔ)配置，示例代碼如下：

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

最后我們封裝兩個(gè)方法，一個(gè)是開(kāi)始方法，一個(gè)是結(jié)束的方法，示例代碼如下：

// 打開(kāi)進(jìn)度條
export const start = () => {
  NProgress.start()
}

// 關(guān)閉進(jìn)度條
export const close = () => {
  NProgress.done()
}

?? 在Vue切換路由時(shí)展示進(jìn)度條

現(xiàn)在我們就來(lái)使用我們上面封裝的Nprogress，這里我們?cè)赩ueRouter的配置文件中使用，實(shí)現(xiàn)切換路由時(shí)在頂部展示進(jìn)度條，首先我們打開(kāi)VueRouter的配置文件，然后引入我們封裝的Nprogress：

// router/index.ts

import { close, start } from '/@/utils/nprogress'

然后我們?cè)趧?chuàng)建的Router實(shí)例中使用這兩個(gè)方法：

const router = createRouter({
  routes,
  history: createWebHistory(),
})

router.beforeEach((pre, next) => {
  start()
})

router.afterEach(() => {
  close()
})

beforeEach：路由切換之前觸發(fā)；
afterEach：路由切換完成后觸發(fā)；

現(xiàn)在我們切換路由就可以實(shí)現(xiàn)頂部進(jìn)度條的切換。

到此這篇關(guān)于詳解如何在Vue3+TS的項(xiàng)目中使用NProgress進(jìn)度條的文章就介紹到這了,更多相關(guān)Vue3 NProgress進(jìn)度條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: