vue3 + ts + pnpm：nprogress / 頁面頂部進度條效果實現

更新時間：2024年09月23日 10:57:41 作者：snowball_li

NProgress是一款輕量級的進度條庫,主要用于網頁頂部顯示頁面加載或運行進度,它易于安裝和使用,并提供良好的視覺效果,NProgress也可以與VueRouter結合使用,通過導航守衛(wèi)在路由跳轉時自動顯示和隱藏進度條,該庫的使用提高了用戶對網頁加載狀態(tài)的感知,優(yōu)化了用戶體驗

一、簡介

nprogress 是一個輕量級的進度條庫，它適用于在網頁上添加頂部進度條，用于指示頁面加載進度或任何長時間的運行過程。這個庫非常流行，因為它易于使用且視覺效果很好。

二、安裝

pnpm add nprogress

三、在使用的頁面引入 / src/views/nprogress/index.vue

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

四、頁面使用

4.1、配置 nprogress（可選）

NProgress.configure({ showSpinner: false }); // 關閉加載指示器

4.2、代碼

<template>
  <div class="container">
    <button @click="fetchData">獲取數據</button> 
  </div>
</template>
<script setup lang="ts">
import NProgress from 'nprogress'
import 'nprogress/nprogress.css';
NProgress.configure({ showSpinner: false }); // 關閉加載指示器  
const fetchData = () => {
  NProgress.start(); // 開始進度條
  setTimeout(() => {
    NProgress.done(); // 完成進度條 
    console.log('success')
  }, 3000);
}
</script>
<style scoped lang="less">
</style>

4.3、效果

五、Vue Router 中使用

如果你在使用 Vue Router，并且想要在每個路由跳轉時顯示和隱藏進度條，你可以使用 Vue Router 的導航守衛(wèi)。

import { createRouter, createWebHistory } from 'vue-router';  
import NProgress from 'nprogress';  
import 'nprogress/nprogress.css';  
const routes = [  
  // 你的路由定義  
];  
const router = createRouter({  
  history: createWebHistory(),  
  routes,  
});  
router.beforeEach((to, from, next) => {  
  NProgress.start();  
  next();  
});  
router.afterEach(() => {  
  NProgress.done();  
});  
export default router;