Nprogress实现路由加载进度[React+Vue]

---

1. Nporgress

在很多网页的加载过程中，顶部都会展示一个进度条来显示加载进度。Nprogress 就是一款非常方便的进度条插件，其主要用法为：

NProgress.start() — 开始

NProgress.set(0.4) — 设置百分比

NProgress.inc() — 随机增长进度条（不会到达100%）

NProgress.done() — 完成

2. React中的使用

在切换页面时出现进度条，本质就是将其与路由结合使用。首先的想法是将 react-router-dom 中的 Router 组件进行封装，在 useEffect 中控制 Nprogress 的进度。

React中的 Suspense 和 lazy 可以实现基于路由的代码拆分，其中 Suspense 组件用于指定在加载得到路由打包文件前显示一个自定义loading界面，此时需要显示的即为 Nprogress 的加载效果。

import React, {
    Suspense } from 'react';
import {
    Routes, Route } from 'react-router-dom';

import NProgress from './components/NProgress';

const Home = React.lazy(() => import('./pages/Home'));

const App: React