顶部进度条如何实现

# 顶部加载进度条如何实现

类似 YouTube 网站顶部这个红色进度条

# 首屏优化：组件动态导入

Vue 开发单页 Web 应用（single page web application，SPA）的时候经常用到动态导入

const routes: Array<RouteObj> = [
  {
    path: '/',
    name: 'AppWrapper',
    component: () => import('@/views/app-wrapper.vue'),
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        meta: {
          title: 'dashboard',
          addToMenu: true,
          description: 'dashboard',
          icon: DataAnalysis,
          roles: ['admin', 'user']
        },
        redirect: { name: 'DashboardMain' },
        component: () => import('@/components/wrapper/wrapper.vue'),
        children: []
      }
    ]
  }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

这样做的好处是可以优化首屏渲染时间，代价就是每次切换路由要加载资源，有明显的顿挫感

这时候在顶部加一个进度条就可以提升用户体验

# 原理

核心原理是利用路由守卫

// 前置守卫
router.beforeEach((to: any, from: any, next: any) => {
  // 这里添加顶部进度条
  next()
})

router.afterEach(() => {
  // 在即将进入新的页面组件前，关闭掉进度条
})

1
2
3
4
5
6
7
8
9

进度条样式：

大致思路是添加一段 width 100% 的 div fixed 在页面的顶部，定时任务去改变这段 div 的 css 属性即可

# 使用 NProgress.js 实现

为了偷懒，我们使用现成的 NProgress.js (opens new window) (Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and Medium.)

// router.ts

// 顶部路由加载进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({
  easing: 'ease', // 动画方式
  speed: 600, // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3 // 初始化时的最小百分比
})

router.beforeEach((to, from, next) => {
  // 这里添加顶部进度条
  NProgress.start()
  next()
})
router.afterEach(() => {
  // 在即将进入新的页面组件前，关闭掉进度条
  NProgress.done()
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

上次更新: 2023/04/05, 09:41:10