如何使`teleport`在vue3的SSR中工作？答案

【问题标题】：How to make `teleport` work in SSR in vue3?如何使`teleport`在vue3的SSR中工作？
【发布时间】：2021-04-16 03:22:37
【问题描述】：

似乎默认情况下teleport 不会使用renderToString 呈现。

有人知道如何在 Vue3 中渲染和水合teleport 组件吗？

我找到了一些测试here，但无法弄清楚如何将其应用于现实世界的示例，也找不到有关此主题的任何信息。

【问题讨论】：

标签： vue.js vuejs3 vue-ssr vue-teleport

【解决方案1】：

好吧，你可以在 ssr 中加载传送，但我不确定你是否可以补水。考虑这个例子

html.js
   <html>
   <head>${context.teleports.head}</head>
   <body></body>
   </html>

App.vue
   <template>
      <teleport to="head">
        <title>Hello world</title>
        <meta name="viewport" content="width=device-width">
      </teleport>
      <div id="#app">This is app</app>
   </template>

Output (html)
   <html>
   <head>
     <title>Hello world</title>
     <meta name="viewport" content="width=device-width">
   </head>
   <body></body>
   </html>

这里我们正在渲染我们的传送，所以即使没有js我们也可以设置一些数据。但我们不能为它补充水分，因为它没有任何联系。取而代之的是，传送将被附加一次，我们将得到重复的传送内容。

所以我所能做的就是使用这个解决方法。在 App.vue 挂载之前，我们删除了旧的 Teleport，以便新的可以替换它。这不是水合作用，因此对于大型组件来说速度较慢，但效果很好。

App.vue
  <script>
    export default {
      name: 'App.vue',
      created() {
        if(window !== undefined) document.head.innerHTML = '';
      }
    }
  </script>

【讨论】：