Vue项目增加路由跳转全局进度条 NProgress.js
GitHub：rstacruz/nprogress: For slim progress bars like on YouTube, Medium, etc (github.com)
NProgress.js 的用法非常简单 引入后只需在路由守卫中稍加配置即可
1. 安装
亦可使用yarn npm等方式安装 这里以pnpm安装举例
pnpm install --save nprogress2. 引入使用
在路由文件内 进行如下操作
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)