Vue 3中如何将文章内的图表URL链接渲染为对应组件？

完全不需要用嵌套路由的方案，路由是做页面导航管理的，用在零散的内嵌图表渲染上属于过度设计，推荐3种适配不同场景的实现方案： #

1. 动态组件+内容解析（最贴合当前场景） #

你只需要先做一层内容预解析，自动识别文章里的所有图表链接，根据链接携带的图表类型/ID映射到对应的图表组件，用动态组件渲染即可，完全不用提前定义任何路由和router-view。
以Vue为例的实现参考：

• 提前定义图表映射表：

const chartComponentMap = {
  line: import('./LineChart.vue'),
  bar: import('./BarChart.vue'),
  pie: import('./PieChart.vue')
}

• 文章渲染时遍历解析出来的图表配置，用动态组件渲染：

<component 
  :is="chartComponentMap[chart.type]" 
  v-bind="chart.params"
/>

你也可以把这段逻辑封装成自定义的markdown解析插件，渲染文章内容时自动把图表链接替换成对应组件，全程无需手动处理每个图表的配置。 #

2. 通用iframe封装组件（零额外依赖） #

如果你的图表都是独立可访问的单页面，不需要和当前文章做数据交互，可以直接封装一个通用的图表iframe组件，解析到图表链接的时候直接生成组件渲染即可：

<ChartIframe :src="chartLink" :height="400" class="w-full border-none" />

只需要给iframe加基础的适配样式，再补个加载状态就能实现和原生嵌入一致的效果。 #

3. 动态路由参数匹配（仅当图表需要独立访问时使用） #

如果业务要求每个图表有独立的路由地址可直接访问，也不需要定义多个命名router-view，只要加一条动态路由规则即可：

// 路由配置只需要写一次
{
  path: '/chart/:chartId',
  component: ChartContainer
}

在ChartContainer组件内，直接根据路由参数chartId拉取对应图表的配置渲染即可，不用声明多个路由规则。

内容的提问来源于stack exchange，提问作者ruxtain