之前写了一篇博文,说nuxt3无法隐藏请求接口。
如何把控全站静态,比较一下nuxt3 和 vite-plugin-ssr_oyksoft的博客-CSDN博客vue3的nuxt3和vite-plugin-ssr的SSR和SSG方案的对比。
https://blog.csdn.net/oyksoft/article/details/132256553
现经过再研究,发现是对vue3还是研究得太浅了。现在得到解决方法了。贴上代码:
<template>
<section>
<h1>mountains</h1>
<div v-for="m in data">
{{ m.title }}
</div>
</section>
</template>
<script setup>
const data = useState('mountains', () => null)
onServerPrefetch(async () => {
// 组件作为初始请求的一部分被渲染
// 在服务器上预抓取数据,因为它比在客户端上更快。
let mountains = await $fetch("https://api.nuxtjs.dev/mountains");
data.value = mountains;
}
)
</script>
关键点:
Vue3中的onServerPrefetch函数。
以及nuxt3中独有的useState函数。