用vue-路由器获取脚本设置中的数据
用vue-路由器获取脚本设置中的数据
提问于 2022-07-05 07:09:58
有人尝试过使用路由器从script setup中获取数据吗？我认为问题在于脚本设置何时编译为async setup。这是我的主要路由器组件的模板：
<RouterView v-slot="{ Component }">
<KeepAlive max="1">
<component :is="Component" v-bind="props" />
</KeepAlive>
</RouterView>示例模板：
<template>
<p>{{ JSON.stringify(data) }}</p>
</template>
<script setup>
const data = await fetchData();
</script>如果使用异步函数，组件不会呈现，我得到以下错误：Component <Anonymous>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered.
然后，我修改了我的主模板如下：
<RouterView v-slot="{ Component }">
<KeepAlive max="1" include="CompletePage">
<Suspense timeout="0">
<template #default>
<component :is="Component" v-bind="props" />
</template>
</Suspense>
</KeepAlive>
</RouterView>组件现在呈现，但我也得到了一个新的警告打印到控制台：[Vue warn]: <Suspense> slots expect a single root node以及以下消息：<Suspense> is an experimental feature and its API will likely change.
从<script setup>获取数据的最佳方法是什么？这里还有什么东西我没看见吗？也许还有别的选择？如果Suspense是一个实验性的特性，为什么引擎会强迫我使用它呢？
回答 1
Stack Overflow用户
发布于 2022-07-12 12:58:02
我通常从我的主<script setup>中获取数据，但是我没有这个问题。
我目前的代码是：
// main.ts
const app = createApp(App);
app.use(router);
router.isReady().then(() => {
app.mount("#app");
});<!-- app.vue -->
<template>
<router-view v-slot="{ Component }">
<Suspense>
<component :is="Component" />
</Suspense>
</router-view>
</template><!-- somepage.vue -->
<template>
<div>
<pre>{{ someData }}</pre>
</div>
</template>
<script setup>
const someData = ref([]);
someData.value = await fetchSomeData();
</script>这个对你有用吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72865281
复制相关文章
相似问题
腾讯云开发者
