Vue项目增加路由跳转全局进度条 NProgress.js

RyzenVega2024-08-01 18:21

GitHub：rstacruz/nprogress: For slim progress bars like on YouTube, Medium, etc (github.com)

NProgress.js 的用法非常简单引入后只需在路由守卫中稍加配置即可

1. 安装

亦可使用yarn npm等方式安装这里以pnpm安装举例

复制代码

pnpm install --save nprogress

2. 引入使用

在路由文件内进行如下操作

复制代码

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


router.beforeEach((to, from, next) => {
  NProgress.start() // 显示进度条
  next()
})

router.afterEach(() => {
  NProgress.done() // 完成进度条
})

3. 个性化配置

复制代码

NProgress.configure({     
    easing: 'ease',  // 动画方式    
    speed: 500,  // 递增进度条的速度    
    showSpinner: false, // 是否显示加载ico    
    trickleSpeed: 200, // 自动递增间隔    
    minimum: 0.3 // 初始化时的最小百分比
})

其他高阶用法请参考如下文章

Vue2中级指南-05 Vue中路由跳的转进度条和数据加载Loading显示 - 掘金 (juejin.cn)