检查动态组件是否存在

Question

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

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

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

<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
    },
  },
})

Answer 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
        })

    },

检查动态组件是否存在

Check if dynamic component exists

javascript

nuxt.js