记录路由配置之显示进度条

---

前言

最近动态配置路由的时候，在路由数据还未返回的时候，会出现空白情况

咱使用现成nprogress 插件，实现路由切换的时候展示细长进度条效果

参考nprogress

依赖安装

安装nprogress
由于使用了TS，还需要安装对应type的依赖@types/nprogress
项目根目录执行

npm i nprogress -S
npm i --save-dev @types/nprogress -S
1
2

使用

直接在路由文件内引入并使用

// 导入插件
import NProgress from "nprogress";
// 导入插件样式
import "nprogress/nprogress.css";

...

/**
 * 路由完成后
 */
router.beforeEach((to, from, next) => {
  NProgress.start();
  if (to.meta.title) {
    document.title = to.meta.title as string
  }
  setTimeout(() => {
    NProgress.done();
    next()
  }, 15000)
})
/**
 * 路由完成后
 */
router.afterEach((to) => {
  NProgress.done();
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

效果如图

---

如有启发，可点赞收藏哟~