Nprogress支持路由加载[React+Vue]

文章目录

• 1. Nporgress
• 2. React中的使用
• 3. Vue中的使用

1. Nporgress

很多网页在加载时都会有这样一个进度条用于显示加载进程。（注：简化语序并调整表达方式）而Nprogress 是一款极为便捷的Progress插件主要用于实现某种功能或目的。（注：替换词汇并调整句式以增强专业性）

NProgress.start() — 启动

NProgress.set(0.4) — 设置进度值

NProgress.inc() — 以随机增量增加进度条（保证不超过100%）

NProgress.done() — 结束

2. React中的使用

当切换页面时显示进度条的行为本质上是将该组件与路由系统相结合的应用。为了实现这一目标，最初考虑的方法是在Effect钩子中对React Router的Router组件进行封装，并通过此机制来控制Nprogress组件的状态更新。

在React中使用Suspense和lazy组件能够实现基于路由的代码拆分。其中，在页面加载并解析路由打包文件之前展示一个自定义的loading界面是使用到 suspensions 组件的主要场景之一。当页面尚未完全解析到可执行代码时，默认会渲染一个简单的 loading