本文示例是在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;