静安郑州阳网站建设网站建设太原

在Vue2中，实现路由懒加载可以使用import的动态引入方式。通常，我们可以将组件作为被引入的模块，并在routes配置中使用component: () => import('@/components/Example.vue')来实现懒加载。

在Vue3中，懒加载的实现方式稍有不同。Vue3提供了一个新的函数defineAsyncComponent，用于定义异步组件。我们可以将组件作为参数传递给defineAsyncComponent函数，并在routes配置中使用component: defineAsyncComponent(() => import('@/components/Example.vue'))来实现懒加载。

需要注意的是，Vue3中的defineAsyncComponent函数还可以接收一个loader函数作为参数，用于在组件加载之前显示自定义的加载中效果。例如，可以将loader函数定义为返回一个加载中的提示组件：

import { defineAsyncComponent } from 'vue';const Example = defineAsyncComponent(() => import('@/components/Example.vue'), {loader: () => import('@/components/Loading.vue')
});

这样在组件加载过程中，会先显示Loading.vue组件，等到异步组件加载完成后，再渲染Example.vue组件。