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

发布于08月08日

我有一个nuxt页面，分为两部分.第一部分是一个正常的模板 struct ，其中填充了基于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>{{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>

Vue.js相关问答推荐

：deep() 带有嵌套 scss 规则的语法

如何通过 setup() 发出多个参数？

在重复表行中

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

推荐答案

Vue.js相关问答推荐

：deep() 带有嵌套 scss 规则的语法

如何通过 setup() 发出多个参数？

在重复表行中

webpack vue-loader 配置

如何在vue中动态加载组件

云Firestore保存额外的用户数据

Vue：在表格中显示嵌套数据

使用 vue-test-utils 配置过滤器

如何告诉 Vue 应用使用 Firebase 模拟器？

Javascript/vue.js 接收json

取消选中单选按钮

VS代码中的红点是什么意思

组件已注册但未使用 vue/no-unused-components

仅在提交时验证 vuetify 文本字段

使用 CloudFront 部署在 S3 上的 VueJS 应用程序的指定的密钥不存在

如果通过 jquery 更新，Vuejs 绑定不起作用

如何使用vue js判断组件本身的数据何时发生变化？

Vue 3 组合 API 数据()函数

超过最大调用堆栈大小 Vuetify

理解 Vue 中的this关键字