Vue 如何做到可制定化的路由加载方式呢？

1. 背景
2. 传统方式
• 弱网络
• 网络断开
• 我们想要啥效果
3. 寻找解决方案
4. 思路
• 弱网络
• 网络断开
• 变换 Loading
5. 花里胡哨
• 注意：

背景

在开始之前，先介绍一下我们目前新项目的采用的技术栈

• 前端公共库： vue3 + typescript + jsx + antdVue
• 后台项目：vue3 + typescript + jsx + antdVue

没错，我们现在都采用 ts + jsx 语法来开发新项目，这里可能会有小伙伴说了，不用 template 吗，装啥装。这里面要讨论内容很多，下次有机会在分享，今天不讨论这个问题。

回到正文~~

这个月老大在技术优化上(前端公共库)派了几个任务给我，其中的一个是“路由注册改造，采用组件内的异步加载”，大家一看，肯定会想，就这？这个不是配合 router.beforeEach 和 router.afterEach 在加个显示进度条的库 NProgress 不就完事了嘛。没错，就是按传统的方式会有一些问题，后面会讲，这里我们先来看传统方式是怎么做的。

传统方式

这个方法大家应该都用过，就是在路由切换的时候，顶部显示一个加载的进度条，我们这里借助的库是 NProgress。

第一步，需要安装插件：

yarn add  nprogress

第二步，main.ts中引入插件。

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

第三步，监听路由跳转，进入页面执行插件动画。

路由跳转中

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

跳转结束

router.afterEach(() => {
  // 关闭进度条
  NProgress.done()
})

很简单的一个配置，运行后，当我们切换路由时就会看到顶部有一个进度条了：

从图片可以看出点击菜单一和三时，我们使用菊花的加载方式，点击菜单二就会显示我们自定义的加载方式。

注意：

这里有一个显性的 bug，就是下面代码：

component: defineAsyncComponent({ 
   loader: () => import('@/pages/Menu2'),
   loadingComponent: BubbleLoading,
}),

不能用函数的方式来写，如下所示：

component: () => defineAsyncComponent({ 
   loader: () => import('@/pages/Menu2'),
   loadingComponent: BubbleLoading,
}),

这里因为我在 createRouter 方法中使用 typeof childrenRoute.component === 'function'来判断，所以上面代码又会被defineAsyncComponent包起来，变成两层的defineAsyncComponent，所以页面加载会出错。

我也想解决这个问题，但查了很多资料，没有找到如何在方法中，判断方法采用的是defineAsyncComponent方式，即下面这种形式：

component: () => defineAsyncComponent({ 
    loader: () => import('@/pages/Menu2'),
    loadingComponent: BubbleLoading,
}),

如果有小伙伴知道的，可以私信告诉我一下。

原文链接：点击这里