首页vue loading进度条

vue loading进度条

时间: 2025-06-12 08:35:55 浏览: 1

### 实现 Loading 进度条组件为了在 Vue 项目中实现 loading 进度条效果，可以采用 NProgress 库来创建全局的加载指示器。以下是具体的方法： #### 安装依赖库首先安装 `nprogress` 和其样式文件： ```bash npm install nprogress --save ``` #### 创建工具函数定义用于控制进度条显示与隐藏的功能模块，在项目的 utils 文件夹下新建一个名为 `util.js` 的文件并编写如下代码： ```javascript // ~/composables/util.js import NProgress from 'nprogress'; import 'nprogress/nprogress.css'; export function showFullLoading() { NProgress.start(); } export function hideFullLoading() { NProgress.done(); } ``` #### 配置路由守卫为了让每次页面切换都能自动触发 loading 效果，需配置 vue-router 的前置和后置钩子函数。对于 Vue Router 设置如下所示： ```javascript // ~/router/index.js import { createRouter, createWebHistory } from 'vue-router' import { showFullLoading, hideFullLoading } from '~/composables/util' const routes = [ // 路由配置... ] const router = createRouter({ history: createWebHistory(), routes, }) router.beforeEach((to, from, next) => { showFullLoading() next() })[^1] router.afterEach(() => { hideFullLoading() })[^1] export default router; ``` 这样设置之后，当用户访问新页面时会先启动 progress bar 并且等到页面完全渲染完成后再关闭它。

阅读全文