VUE3 Supense,defineAsyncComponent如何配合router-view使用

“Devil组”引证GPT后的撰写：

Suspense和defineAsyncComponent是Vue3中新增的特性，用于实现组件的异步加载和错误处理。而router-view是Vue Router中用于渲染路由组件的组件。

当结合使用Suspense和defineAsyncComponent时，可以实现在加载路由组件时显示占位符和处理异步加载过程中的错误。

以下是一个简单的例子：

<template>
  <Suspense>
    <router-view :key="$route.fullPath" />
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const Home = defineAsyncComponent(() => import('@/views/Home.vue'));
const About = defineAsyncComponent(() => import('@/views/About.vue'));

export default {
  components: {
    Home,
    About,
  },
};
</script>

先导入了defineAsyncComponent函数，然后用它来定义异步加载的路由组件Home和About。在模板中，用Suspense组件包裹了router-view，并将路由组件渲染到router-view中。这样，当路由组件加载时，Suspense会自动显示占位符，并处理异步加载过程中的错误。

需要注意的是，在router-view中使用了:key="$route.fullPath"，这是为了确保在路由切换时重新渲染组件。这样，即使在同一个路由下切换不同的参数，也能重新渲染组件。

另外，由于用了defineAsyncComponent来定义异步加载的路由组件，因此要将这些组件在组件选项中注册，以便在使用时能够正确地被识别和加载。