前言

在 vue 项目中，切换路由页面时，我们希望页面顶部有一个进度条，用来标识页面跳转的进度。这样可以减轻用户的等待压力，提升用户体验。

一、安装  NProgress

npm install nprogress --save

如果使用 ts，还需安装 @types/nprogress

npm i --save-dev @types/nprogress

 二、在 router/index.ts 中引入 nprogress

// router/index.ts
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

 三、路由守卫监听路由变化

// router/index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/layout/MyHome.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

router.beforeEach((to, from, next) => {
  NProgress.start() // 进度条开始
  next()
})

router.afterEach(() => {
  NProgress.done() // 进度条结束
})

export default router

四、进度条属性配置

// router/index.ts

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

五、修改进度条颜色

在 App.vue 文件中修改进度条样式

#nprogress .bar {
  background-color: red !important;
}