在Vue3项目中实现路由变化时的加载条效果

在大型单页面应用程序中，使用路由进行页面间的切换非常常见。为了提升用户体验，我们通常会在路由加载时显示一个加载条，表示页面正在加载，避免因为页面内容加载时间过长而导致用户误以为页面没有反应。在Vue3中，结合Naive UI库，我们可以非常方便地实现这一功能。本文将详细介绍如何在Vue3项目中集成Naive UI的加载条组件，并在路由变化时自动显示和隐藏加载条。

项目背景

本文的项目使用的技术栈包括：Vue3、Naive UI、Vue Router 4 和 TypeScript。我们将通过以下几个步骤，逐步实现当路由发生变化时显示加载条的功能。

解决方案概述

解决方案主要分为以下几个步骤：

1. 导入Naive UI的常用组件，并进行必要的设置。
2. 扩展 window 对象的类型定义，添加对加载条的支持。
3. 在路由守卫中实现加载条的显示和隐藏。
4. 配置路由守卫并集成到整个项目中。

详细步骤

0. 导入Naive UI的常用组件

首先，我们需要在项目中导入Naive UI的加载条组件。Naive UI 是一个轻量级的 Vue 3 组件库，拥有丰富的 UI 组件，能够非常方便地集成到 Vue 3 项目中。

import type { App } from "vue";
import { create, NLoadingBarProvider } from "naive-ui";

export default function setupNaiveUI(app: App) {
  const common = create({
    components: [NLoadingBarProvider],  // 引入加载条组件
  });
  app.use(common);
}

在上述代码中，我们通过 create 方法导入了 NLoadingBarProvider 组件，并在Vue的实例中注册它。

注意：更多关于如何安装和自动导入Naive UI组件的内容，可以参考我的另一篇文章：安装Naive UI【包含自动导入常用组件】

1. 扩展 lib.dom.d.ts 中的 window 对象

为了能够在路由加载时全局使用加载条组件，我们需要将 NLoadingBarProvider 实例挂载到 window 对象上。由于TypeScript中默认的 window 对象并没有我们需要的 $loadingBar 属性，我们需要对其进行扩展。

首先，创建一个 types.d.ts 文件，扩展 window 对象：

/**扩展lib.dom.d.ts的window类型定义 */
interface Window {
  /** 将naive常用组件挂载到window */
  $loadingBar?: import('naive-ui').LoadingBarProviderInst;
  $dialog?: import('naive-ui').DialogProviderInst;
  $message?: import('naive-ui').MessageProviderInst;
  $notification?: import('naive-ui').NotificationProviderInst;
}

通过这种方式，我们为 window 对象添加了 $loadingBar 属性，这样可以在全局范围内使用加载条功能。

2. 在路由守卫内添加加载条的控制逻辑

接下来，我们需要在路由守卫中使用 window.$loadingBar 来实现加载条的显示与隐藏。

创建一个 guard.ts 文件，并在其中添加以下代码：

import { Router } from "vue-router";

export function createRouteGuard(router: Router) {
  router.beforeEach(async () => {
    // 在路由变化之前显示加载条
    window.$loadingBar?.start();
  });
  
  router.afterEach(() => {
    // 路由加载完成后隐藏加载条
    window.$loadingBar?.finish();
  });
}

在这里，我们使用了 Vue Router 4 提供的路由钩子函数 beforeEach 和 afterEach 来实现加载条的显示与隐藏逻辑。beforeEach 钩子在路由跳转开始时触发，我们使用 window.$loadingBar?.start() 显示加载条。而 afterEach 钩子在路由跳转结束时触发，使用 window.$loadingBar?.finish() 隐藏加载条。

3. 添加路由守卫

为了使路由守卫生效，我们需要在路由配置文件中导入 createRouteGuard 函数，并将其应用到我们的路由实例上。

在 router/index.ts 文件中，添加以下代码：

import { App } from "vue";
import {
  createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw,
} from "vue-router";
import { createRouteGuard } from "./guard";  // 导入路由守卫
import teacherRoute from "./teacher/route";

const routes: Array<RouteRecordRaw> = teacherRoute;

// 根据环境选择哈希路由或历史路由
const history = process.env.VUE_APP_HASH_ROUTE === 'true' ? createWebHashHistory() : createWebHistory();

const router = createRouter({
  history,
  routes,
});

export async function setupRouter(app: App) {
  app.use(router);
  createRouteGuard(router);  // 使用路由守卫
}

export default router;

在上述代码中，我们首先导入了 createRouteGuard 函数，并在 setupRouter 函数中将其应用到路由实例 router 上。

4. 整体效果实现

当配置完成后，我们可以在项目中查看效果。在路由跳转时，会出现一个加载条，表示页面正在加载。当页面加载完成后，加载条会自动消失。

实现效果图：

5. 常见问题和优化建议

1. 加载条不出现的问题：如果加载条没有出现，请确保 NLoadingBarProvider 已正确注册到 app 上，并且 window.$loadingBar 已正确初始化。

2. 优化加载条的显示时机：如果需要对加载条的显示时机进行更精细的控制，例如只在某些特定的路由跳转时显示，可以在 beforeEach 中添加条件判断。

3. 样式和配置自定义：NLoadingBarProvider 组件支持自定义样式和配置，您可以根据项目需求来调整加载条的颜色、速度、位置等属性。可以在全局注册组件时传递自定义配置：

   const common = create({
     components: [NLoadingBarProvider],
     // 自定义加载条配置
     configProviderProps: {
       loadingBar: {
         color: '#18a058',
         duration: 8000,
         height: 3,
       },
     },
   });
   

总结

通过本文的步骤，我们学会了如何在Vue3项目中结合Naive UI和Vue Router，实现路由变化时的加载条效果。这个功能能够显著提升用户体验，减少用户在路由跳转过程中的等待焦虑。希望本文能对您有所帮助，您也可以根据实际项目的需求对加载条功能进行进一步优化和定制。