检查动态组件是不是存在

Posted 2023-02-23

【中文标题】检查动态组件是不是存在

【英文标题】：Check if dynamic component exists检查动态组件是否存在

【发布时间】：2021-12-22 02:27:31

【问题描述】：

在 Nuxt 中动态显示组件之前，我需要检查它是否存在。组件名称是基于路由 slug，因此我无法提前知道组件名称是否有效。

如果 slug 没有组件，我想使用 v-else 显示文本。 （见标记）

但是，我无法推断组件是否可用，因为返回值始终是一个函数。

<component :is="componentDynamic" v-if="componentDynamic" />
<h1 v-else>Component Not available</h1>

import Vue from 'vue'
export default Vue.extend(
  computed: 
    componentDynamic() 
      const componentName = this.$route.params.slug,
      const result = async () => await import(`@/components/$componentName`)
      console.log(result)
      return result
    ,
  ,
)

【问题讨论】：

很确定我已经在这里看到了这个问题。你搜索了吗？

***.com/questions/69200097/…***.com/questions/51358922/…

这能回答你的问题吗？ How do I properly import multiple components dynamically and use them in Nuxt?

动态导入不是问题。我应该准确地说，检测组件的存在是我正在寻找的。例如，组件参数可以是“notThere”。如果 :is= 属性正在寻找该组件，它不会找到它。在这种情况下，我想在 v-else 语句中显示文本。但是，“v-if”不能与 'is:=' 一起用于检测组件是否存在。

【参考方案1】：

通过尝试通过import 导入组件来确定组件是否存在。 如果导入出错，则该组件不可用并显示替代消息。

<template>
  <div>
    <component
      :is="componentName"
      v-if="componentIsAvailable"
    />
    <!-- Show if component doesn't exist -->
    <div v-else>
      <h1 class="text-5xl my-20">Component Not available</h1>
    </div>
  </div>
</template>

    data() 
      return 
        componentIsAvailable: false,
        componentName:  this.$route.params.componentName // nuxt components are in PascalCase, so your parameter / slug should be as well
      
    ,
    async fetch() 
      const name = this.componentName

      this.componentIsAvailable = await import(`@/components/$name`)
        .then((_res) => 
          // console.log('result', _res)
          return true
        )
        .catch((_error) => 
          // console.log('error', _error)
          return false
        )

    ,