简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Schreiben Sie den Titel um: So übergeben Sie Daten von Node.js mithilfe von SSR in Vue 3
P粉078945182
P粉078945182 2023-08-25 18:42:30
0
1
534
<p>Ich erstelle eine Website mit vue.js 3 und möchte serverseitiges Rendering verwenden. Ich möchte auch in der Lage sein, Daten von meinem Fastify- (oder Express-)Server an vue.js 3 zu übergeben. Gibt es eine Möglichkeit, dies zu tun (ich habe etwas namens express-vue: github link gesehen, aber es ist für Vue 2 und nicht offiziell, daher weiß ich nicht, ob es gut ist)? Und können Sie die Hydratation des Clients einbeziehen, da ich einige Beispiele wie https://github.com/moduslabs/vue3-example-ssr gesehen habe, aber die Hydratation des Clients nicht enthalten ist, würde ich es verwenden, wenn dies nicht möglich ist ejs, aber ich bevorzuge vue 3. Können Sie mir ein Beispiel oder eine Vorlage geben? Vielen Dank im Voraus! </p>
P粉078945182
P粉078945182

Antworte allen(1)
P粉336536706
P粉3365367062023-08-26 09:55:40 1 Etage

您可以将上述内容翻译成中文：

<p>您可以将上下文对象传递给renderToString函数</p>
<pre><code>const context = { data: 'Hello world' } // 您想要共享的数据
const html = renderToString(App, context)
</code></pre>
<p>在Vue组件中，可以使用useSSRContext来访问此对象</p>
<pre><code>setup() {
    if (typeof window === 'undefined') {
        const context = useSSRContext()
        console.log(context.data) // Hello world
    }
}
</code></pre>
<p>与Vue 2不同，您无需在<div id="app">中添加data-server-rendered="true"，当您在浏览器上使用createSSRApp而不是createApp时，Vue 3会自动进行客户端渲染</p>
<hr />
<p>要在浏览器中传递对象，您需要在从服务器返回结果时将其写入<head>中的window变量中</p>
<pre><code>const html = renderToString(App, context)

res.send(`
    <html>
    <head>
        <script>window.context = ${JSON.stringify(JSON.stringify(context))}</script>
    </head>
        <body><div id="app">${html}</div></body>
        <script src="main.js"></script>
    </html>
`)
</code></pre>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！