跳转至

Admin 项目实战（八）：路由进度条

这是 Admin 练习项目的第八篇，练习如何使用 nprogress 实现为路由增加进度条效果。

效果

点击侧边栏菜单，提供进度条加载效果。

routing-project-progress-practice-admin__23Sep22184831740880_1.jpeg

进度条支持

安装插件

1
2
    pnpm i nprogress
    pnpm i --save-dev @types/nprogress

增加进度条模块

调整之前的按需导入实现，加入 router 与 isClient： 

1
2
3
    Object.values(import.meta.globEager("./modules/*.ts")).forEach((i) =>
      i.install?.({ app, router, isClient: true })
    );

修改 UserModule 对应地增加参数： 

1
2
3
4
5
6
7
8
    import { App } from "vue";
    import { Router } from "vue-router";

    export type UserModule = (ctx: {
      app: App;
      router: Router;
      isClient: boolean;
    }) => void;

在 modules 下增加进度条模块： 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
    // nprogress.ts
    import NProgress from "nprogress";
    import type { UserModule } from "./types";

    export const install: UserModule = ({ router, isClient }) => {
      if (isClient) {
        NProgress.inc(0.1);
        NProgress.configure({
          easing: "ease",
          speed: 100,
          showSpinner: true,
        });
        router.beforeEach(() => {
          NProgress.start();
        });
        router.afterEach(() => {
          NProgress.done();
        });
      }
    };

上面的代码中，重点是在 router 的 beforeEach 与 afterEach 加载进度条组件。组建的加载效果与每次增加的进度比例，通过 inc 和 configure 进行配置。

上一课

Admin 项目实战（九）：暗色夜间模式

凡本网注明"来源：XXX "的文/图/视频等稿件，本网转载出于传递更多信息之目的，并不意味着赞同其观点或证实其内容的真实性。如涉及作品内容、版权和其它问题，请与本网联系，我们将在第一时间删除内容！
作者: 勃纳什
来源： https://zhuanlan.zhihu.com/p/645611336