vue3 + ts + pnpm：nprogress / 页面顶部进度条

news2024/9/23 12:21:01

一、简介

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 的导航守卫。

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;