<template>
  <component :is="typeComponentMap[componentId]"></component>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
import componentA from '引入组件'
import componentB from '引入组件'
const route = useRoute()
const componentId = route.params.type
//注意 这里写的是变量 componentA 而不是字符串 'componentA'
const typeComponentMap = { componentA, componentB }
</script>
<style lang="scss" scoped></style>
vue3 component组件动态is匹配组件
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
 平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 1.问题 动态添加路由之后,页面重新匹配路由,匹配到了设置的404 notfound页面 该页面是在路径无法匹配到...
- 完整原文地址见简书https://www.jianshu.com/p/c8891bd3fe36[https://w...
- 本文整理来自深入Vue3+TypeScript技术栈-coderwhy大神新课[https://ke.qq.com...
- 8、动态组件和异步组件 动态组件 运行结果 内容缓存 运行结果 异步组件 运行结果
- 为了方便,我直接将动态组件和异步组件相关内容汇成一图,如下: 为了方便下载和阅读,也为了方便按照你的思路进行修改,...