在带有路由器视图的 Vue3 中使用异步设置（）时我得到了空白

Posted 2023-02-22

【中文标题】在带有路由器视图的 Vue3 中使用异步设置（）时我得到了空白

【英文标题】：I got blank when use async setup() in Vue3 with router-view

【发布时间】：2021-01-24 09:57:34

【问题描述】：

当我在 Vue 3 中使用 async setup () 时，我的组件消失了。我使用了这里找到的解决方案： why i got blank when use async setup() in Vue3 ...它工作，但是当我使用router-view时我有一个空白页。

<template>
    <div v-if="error">error</div>
    <Suspense>
        <template #default>
            <router-view></router-view>
        </template>
        <template #fallback>
            <Loading />
        </template>
    </Suspense>
</template>

<script>
import Loading from "./components/Loading"
import  ref, onErrorCaptured  from "vue"

export default 
    name: 'App',
    components:  Loading ,
    setup() 
        const error = ref(null)
        onErrorCaptured(e => 
            error.value = e
        )
    

</script>

main.js:

import  createApp  from 'vue'
import router from "./router"
import App from './App.vue'

createApp(App).use(router).mount('#app')

当我用我的一个组件替换 router-view 时，它会显示出来。

路由器：

import  createWebHistory, createRouter  from "vue-router";
import Portfolio from "@/views/Portfolio.vue";
import Blog from "@/views/Blog/Blog.vue";
import Detail from "@/views/Blog/Detail.vue";
import NotFound from "@/views/NotFound.vue";

const routes = [
    
        path: "/",
        name: "Home",
        component: Portfolio,
    ,
    
        path: "/blog",
        name: "blog",
        component: Blog,
    ,
    
        path: "/blog/:slug",
        name: "detail",
        component: Detail,
    ,
    
        path: "/:catchAll(.*)",
        component: NotFound,
    ,
];

const router = createRouter(
    history: createWebHistory(),
    routes,
);


export default router;

【参考方案1】：

<Suspense> 的默认模板应该包含一个 async 组件（即，一个带有 async setup() 的组件），但您已将 <router-view> 放在那里。

您必须将 <Suspense> 重构为包含异步组件的自己的包装器组件（例如，HomeView.vue），而将 <router-view> 本身留在 App 中：

<!-- App.vue -->
<template>
  <router-view />
</template>

<!-- HomeView.vue -->
<template>
  <Suspense>
    <template #default>
      <MyAsyncComponent />
    </template>
    <template #fallback>
      <Loading />
    </template>
  </Suspense>
</template>

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

const routes = [
  
    path: '/'
    name: 'Home',
    component: HomeView
  ,
  //...
]