Question

我正在尝试使用渲染功能为动态页面处理的NUXT自动导入。当我制作这样的页面时： test.vue：

<template>
  <div>
    <the-header/>
    <the-footer/>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  head () {
    return {
    }
  }
}
</script>

页面呈现效果很好，Nuxt会自动导入该页面的组件。

当我使用具有渲染功能的动态页面（_.vue）时：

<script>
import frontApi from '~/../../components/tools/api'
export default {
  auth: false,
  name: 'route',
  data () {
    return {}
  },
  methods: {
    bodyComponment (h) {
      const bodyComponents = []
      bodyComponents.push(h('the-header', {
        props: { menuObjects: this.menus, variables: this.variables }
      }))
      this.page.body.map((x) => {
        bodyComponents.push(h(x.component, {
          class: x.cssClass,
          props: { content: x.data, action: x.action, cssClass: x.cssClass }
        }))
      })
      bodyComponents.push(h('the-footer', {
        props: { menuObjects: this.menus, variables: this.variables }
      }))
      bodyComponents.push(h('the-cookies', {

      }))
      return bodyComponents
    }
  },
  computed: {
    bodyPageClass () {
      return (this.pagePath) ? this.pagePath.split('/').filter(x => x !== '').join(' ') : ''
    }
  },
  async asyncData (context) {
    const page = await frontApi.getPage(context.route)
    if (page !== null && page.page.body !== undefined) { return { ...page } } else { context.error({ statusCode: 404, client: true }) }
  },
  head () { return { ...this.page.head } },
  render (h) {
    return h('main', {
      // Mainnode attibutes
      attrs: { class: `f-page ${this.bodyPageClass}` }
    }, h('client-only', {}, this.bodyComponment(h)))
  }
}
</script>
<style scoped></style>

此动态页面不会在Nuxt中自动加载组件。我可以在渲染时或在路线中定义零部件吗？还是有什么方法可以使它与Nuxt组件一起使用？

Nuxt组件不适用于渲染功能动态页面

0 个答案: