技術標籤：vue-clijsvue

本文示例是在vue中展示

首先安裝nprogress

npm nprogress -S

然後在路由的全域性鉤子函式中配置
很簡單，一會就實現了

import { createRouter, createWebHistory } from "vue-router";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import Routes from "./routers";

const
 
 router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: Routes,
});

router.beforeEach(() => {
  NProgress.start();
});

//全域性後置鉤子
router.afterEach(() => {
  NProgress.done();
});
export default router;