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

文章目录

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


1. Nporgress

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

NProgress.start() — 开始

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

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

NProgress.done() — 完成

2. React中的使用

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

React中的 Suspenselazy 可以实现基于路由的代码拆分,其中 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')

你可能感兴趣的:(前端,react.js,vue.js)