Question

<template>
  <nav v-once>
    <catalog-menu-container v-once :items="this.awd.children_data" />
  </nav>
</template>

<script>

import axios from 'axios';
import catalogMenuContainer from '~/components/catalog/menu/container.vue'

export default {
  name: 'catalog-menu',
  components: {
    catalogMenuContainer
  },
  async serverPrefetch () {
      let { data } = await axios.get('url')
      this.awd = data;
  }
}
</script>

此代码中的组件在服务器端呈现。而且，它再次在客户端呈现。如何禁用客户端渲染？我只想要在服务器端生成的html。 “ v-once”不起作用。

Answer 1

vue文档对此warning:

的处理方式很明确

警告您应该检查组件是否在服务器端呈现安装的挂钩以避免执行两次逻辑。

所以您想添加到代码中：

mounted () {
    // If we didn't already do it on the server
    // we fetch the item
    if (!this.awd) {
      let { data } = await axios.get('url')
      this.awd = data;
    }
  },

或者，也许是理想情况下，当您使用nuxt时，可以使用asyncData代替serverPrefetch

async asyncData (context) {
    let { data } = await axios.get(`url`)
    return { context.awd: data }
  }

Answer 2

谢绝Aldarund。他的评论回答了我的问题：

Only SSR / disable client side rendering

仅SSR /禁用客户端渲染

2 个答案: