在带有路由器视图的 Vue3 中使用 async setup() 时,我一片空白
I got blank when use async setup() in Vue3 with router-view
当我在 Vue 3 中使用 async setup ()
时,我的组件消失了。我使用了在这里找到的解决方案:
... 它有效,但是当我使用 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;
<Suspense>
的默认模板应包含一个 异步组件 (即带有 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
},
//...
]
当我在 Vue 3 中使用 async setup ()
时,我的组件消失了。我使用了在这里找到的解决方案:
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;
<Suspense>
的默认模板应包含一个 异步组件 (即带有 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
},
//...
]