cari

Rumah  >  Soal Jawab  >  teks badan

Tulis semula tajuk sebagai: Cara menghantar data daripada Node.js menggunakan SSR dalam Vue 3

<p>Saya sedang membina tapak web menggunakan vue.js 3 dan saya mahu menggunakan pemaparan sebelah pelayan. Saya juga mahu dapat menghantar data ke vue.js 3 dari pelayan fastify (atau ekspres) saya. Adakah terdapat cara saya boleh melakukan ini (saya melihat sesuatu yang dipanggil pautan express-vue: github, tetapi ia untuk vue 2 dan bukan rasmi, jadi saya tidak tahu sama ada ia bagus)? Dan bolehkah anda memasukkan penghidratan pelanggan, kerana saya melihat beberapa contoh seperti https://github.com/moduslabs/vue3-example-ssr tetapi ia tidak termasuk penghidratan pelanggan, jika ini tidak mungkin saya akan gunakan ejs, tetapi saya lebih suka vue 3. Bolehkah anda memberi saya contoh atau templat? Terima kasih terlebih dahulu! </p>
P粉078945182P粉078945182482 hari yang lalu644

membalas semua(1)saya akan balas

  • P粉336536706

    P粉3365367062023-08-26 09:55:40

    Anda boleh menterjemah kandungan di atas ke dalam bahasa Cina: 

    <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>

    balas
    0
  • Batalbalas