时间戳

首页 > 解决方案 > 带有 v-if 的 Vue SSR。如何正确补水？

vue.js - 带有 v-if 的 Vue SSR。如何正确补水？

问题描述

我对 Vue SSR 有疑问。在我的项目中，我有一个名为 slug 的页面，根据在 asyncData 中接收到的数据，安装了适当的组件。它或多或少看起来像这样：

<div>
  <component-a v-if='type === a' />
  <component-b v-else-if='type === b' />
  <component-c v-else-if='type === c' />
</div>

<script>
export default {
  asyncData({ store }) {
    store.dispatch('product/fetchAsync') 
  },
  computed () {
   type () {
     return this.$store.state.type
    }
  }
}
</script>

但是，Vue 无法执行 SSR 水合。是否有可能是由于 v-if 语句造成的？如何正确解决这个问题？我唯一能想到的是前缀并使每个组件成为一个单独的页面，没有 v-if。但客户希望避免这种情况。

标签： vue.jsnuxt.jsserver-side-renderingasyncdata

解决方案

正如一些评论所说，您在服务器端（发生 ssr 的地方）的 html 结构不知道呈现项目或其他项目的条件是否为真。

您可以使用 v-show 代替 v-if。不同之处在于 v-show 将呈现该元素但没有数据。这样你的html就不会改变并且水合成功

推荐阅读