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

news/2024/12/23 1:39:00/

一、简介

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;