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

【问题标题】：Load component dynamically based on url parameters in nuxt根据nuxt中的url参数动态加载组件
【发布时间】：2018-12-23 19:55:10
【问题描述】：

我在 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> 的可能性。但是，这需要我明确导入每个组件，我想避免这种情况。

【问题讨论】：

标签： vue.js vue-component nuxt.js

【解决方案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>

【讨论】：

【解决方案2】：

根据 Imre_G 的回答，可以这样简化：

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

【讨论】：

【解决方案3】：

如果您需要导入现有组件，我找到了一种简单的方法。我这样做是因为我使用的是 Nuxt，并且我只需要在客户端加载组件：

<template>
  <my-component></my-component>
</template>

<script>
  data() {
    return {...}
  },
  mounted() {
    if (process.browser) {
      const component = require("~/assets/libs/component");
      Vue.use("my-component", component); // or just Vue.use(component);
    }
  }
</script>

此方法避免了与Window实例相关的导入错误。

【讨论】：