Vue 3.0 repro
HTML
<script src="https://unpkg.com/vue@3.0.1/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4.0.0-rc.1/dist/vue-router.global.js"></script>
<div id="app">
<router-view v-slot="{ Component }">
<Suspense timeout="0">
<template #default>
<component :is="Component" />
</template>
<template #fallback>
<span>Loading...</span>
</template>
</Suspense>
</router-view>
</div>
JavaScript
const {
createApp,
ref,
defineComponent,
} = Vue
const { createWebHistory, createRouter } = VueRouter
const hello = defineComponent({
template: '{{ greeting }}',
async setup() {
const greeting = ref('');
greeting.value = await new Promise(resolve => setTimeout(() => resolve('Hello'), 2000));
return { greeting }
}
})
let app = createApp({
components: {
hello: hello
},
setup() {
return {
toggled: ref(false)
}
}
})
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/:pathMatch(.*)*',
name: 'home',
component: hello
}
]
});
app.use(router).mount("#app");