当前位置：首页 > article >正文

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

article 2024/12/28 22:57:19

在 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');