vue.js - nuxt中根据url参数动态加载组件

Question

我在 nuxt 中有一个页面分为两部分。第一部分是一个普通的模板结构，其中填充了基于 url 参数的动态内容。第二部分是应该基于此数据加载的组件。我正在尝试像这样完成它:

<template>
  <div>
    <h1>{{myData.header}}</h1>
    <p>{{myData.text}}</p>
    <my-component></my-component>
  </div>
</template>

<script>
export default {
  components: {
    'my-component': () => import('@/components' + this.myData.component)
  },
  async asyncData(context) {
    return {
      myData: context.params.myData
    }
  }
}
</script>

但这行不通。有没有办法做到这一点？

我熟悉使用 <my-component :is="myData.component"></my-component> 的可能性.但是，这需要我显式导入每个组件，我想避免这种情况。

Answer 1

我昨天找到了解决办法。它需要这样做。

<template>
<div>
    <h1>{{myData.header}}</h1>
    <p>{{myData.text}}</p>
    <component :is="componentInstance"></component>
</div>
</template>

<script>
export default {
    computed: {
        componentInstance () {
        const name = this.myData.component
        return () => import(`./components/${name}`)
        }
    },
    async asyncData(context) {
        return {
        myData: context.params.myData
        }
    }
}
</script>

本文中的更多信息:https://itnext.io/vue-a-pattern-for-idiomatic-performant-component-registration-you-might-not-know-about-9f3c091846f5 .