vue项目中如何在路由变化时增加一个进度条

在 Vue.js 项目中，使用路由（如 Vue Router）时，为了提升用户体验，你可能会想要在路由变化时显示一个进度条。这可以通过多种方式实现，其中一种流行的做法是使用第三方库，如 vue-loading-bar 或 nprogress。这里我将介绍如何使用 nprogress 来实现这一功能。

安装 nprogress

首先，你需要安装 nprogress 包：

npm install nprogress --save

引入 nprogress

在你的主文件（通常是 main.js 或 main.ts）中引入 nprogress 并设置全局样式：

import Vue from 'vue';
import router from './router'; // 引入你的路由配置
import NProgress from 'nprogress'; // 引入 nprogress
import 'nprogress/nprogress.css'; // 引入 nprogress 的 CSS 文件

// 初始化 NProgress
NProgress.configure(