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

问题描述

我正在尝试使用渲染功能为动态页面处理的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',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组件一起使用？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）