问题描述
似乎默认情况下 teleport 不会通过使用 renderToString 呈现。
有谁知道如何在 Vue3 中渲染和水合 teleport 组件？
我找到了一些测试 here，但无法弄清楚如何将其应用于现实世界的示例，并且找不到关于此主题的任何信息。
解决方法
好吧，您可以在 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 挂载之前，我们移除了旧的传送点，所以新的可以替换它。它不是水合作用，因此对于大组件来说速度较慢，但效果很好。
App.vue
<script>
export default {
name: 'App.vue',created() {
if(window !== undefined) document.head.innerHTML = '';
}
}
</script>