在 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({
showSpinner: false }); // 配置 NProgress 的选项
// 使用 Vue Router 的 beforeEach 导航守卫
router.beforeEach((to, from, next) => {
NProgress.start(); // 开始进度条
next();
});
// 使用 afterEach 导航守卫
router.afterEach(() => {
NProgress.done(); // 结束进度条
});
new Vue({
router,
}).$mount('#app');
解释代码
- beforeEach 导航守卫：在每次导航开始之前启动进度条。
- afterEach 导航守卫：在每次导航完成后结束进度条。
这样设置后，每次路由变化时，进度条就会自动显示出来，并在页面加载完成后消失。
自定义进度条样式
如果你希望自定义进度条的样式，可以修改 nprogress/nprogress.css 文件中的样式规则，或者覆盖这些样式以适应你的项目需求。
使用 Vue Loading Bar
如果你更倾向于使用 Vue Loading Bar，安装步骤如下：
npm install vue-loading-bar --save
然后在你的 main.js 或 main.ts 中引入并使用它：
import Vue from 'vue';
import LoadingBar from 'vue-loading-bar';
import 'vue-loading-bar/dist/vue-loading-bar.min.css';
Vue.use(LoadingBar);
const router = require('./router').default; // 引入你的路由配置
// 使用 Vue Router 的 beforeEach 导航守卫
router.beforeEach((to, from, next) => {
LoadingBar.start(); // 开始进度条
next();
});
// 使用 afterEach 导航守卫
router.afterEach(() => {
LoadingBar.finish(); // 结束进度条
});
new Vue({
router,
}).$mount('#app');
