Я получил пустой при использовании async setup () в Vue3 с просмотром маршрутизатора

Когда я использую async setup () в Vue 3, мой компонент исчезает. Я использовал найденное здесь решение: почему у меня пусто при использовании async setup () в 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;

javascript vue.js vuejs3 vue-component vue-composition-api
person Hassan PIOU    schedule 09.10.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Шаблон по умолчанию <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
  },
  //...
]
person tony19    schedule 11.10.2020