检查动态组件是否存在答案

【问题标题】：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
    },
  },
})

【问题讨论】：

很确定我已经在这里看到了这个问题。你搜索了吗？
stackoverflow.com/questions/69200097/…stackoverflow.com/questions/51358922/…
这能回答你的问题吗？ How do I properly import multiple components dynamically and use them in Nuxt?
动态导入不是问题。我应该准确地说，检测组件的存在是我正在寻找的。例如，组件参数可以是“notThere”。如果 :is= 属性正在寻找该组件，它不会找到它。在这种情况下，我想在 v-else 语句中显示文本。但是，“v-if”不能与 'is:=' 一起用于检测组件是否存在。

标签： javascript nuxt.js

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

    },

【讨论】：