检查是否存在动态组件

Question

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

如果没有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
},
},
})

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

Answer 2

您可以按如下方式使用resolveDynamicComponent：

import { resolveDynamicComponent } from 'vue'
const isComponent = (name) => typeof resolveDynamicComponent(name) !== 'string'