vue3 + ts + pnpm：nprogress / 页面顶部进度条效果实现

pnpm add nprogress

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

NProgress.configure({ showSpinner: false }); // 关闭加载指示器

<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>

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;