根据nuxt中的url参数动态加载组件

小卤蛋2020-03-23

我在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>。但是，这需要我显式导入每个组件，并且我想避免这种情况。

<template> <div> <h1>Hi</h1> <p>Hello World!</p> <Component :is="component"></Component> </div> </template> <script> export default { computed: { component() { return () => import(`../../__relative_path__/${this.$route.params.yourParam}`) } } } </script>

<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>