Javascript 在Vue3中与路由器视图一起使用async setup（）时，我为空

在Vue 3中使用

async setup（）

时，我的组件将消失。我使用的解决方案如下： ... 它工作了，但是当我使用

路由器视图时，我有一个空白页


{{error}}
从“/组件/加载”导入加载
从“vue”导入{ref，onErrorCaptured}
导出默认值{
名称：“应用程序”，
组件：{Loading}，
设置（）{
常量错误=ref（空）
ONERROR（e=>{
error.value=e
})
}
}

main.js：

从“vue”导入{createApp}
从“/router”导入路由器
从“./App.vue”导入应用程序
createApp（应用程序）.use（路由器）.mount（“#应用程序”）

当我将
路由器视图
替换为我的一个组件时，它会显示出来

路由器：

从“vue路由器”导入{createWebHistory，createRouter}；
从“@/views/Portfolio.vue”导入公文包；
从“@/views/Blog/Blog.vue”导入博客；
从“@/views/Blog/Detail.vue”导入详细信息；
从“@/views/NotFound.vue”导入NotFound；
常数路由=[
{
路径：“/”，
姓名：“家”，
组成部分：投资组合，
},
{
路径：“/blog”，
名称：“博客”，
组成部分：博客，
},
{
路径：“/blog/：slug”，
名称：“详情”，
组成部分：细节，
},
{
路径：“/：catchAll（.*）”，
组件：未找到，
},
];
const router=createRouter({
历史记录：createWebHistory（），
路线，
});
导出默认路由器；
的默认模板应该包含一个异步组件（即带有
async setup（）
的组件），但您将
放在其中

您必须将
重构为包含异步组件的自己的包装器组件（例如
HomeView.vue
），将
自身留在
应用程序中：



然后更新路由器配置以使用该包装器：

const路由=[
{
路径：'/'
姓名：'家'，
组件：HomeView
},
//...
]