在 Vue 中基于 URL 参数更改组件的最佳实践

Question

只是好奇，像 /chart/:charttype

这样的路线

我想将不同类型的图表组件加载到那个图表区域，如何在 VueRouter 中计划这个（目前我只把 /chart/:charttype 放在那里）和组件（目前我在那里放了一个容器组件，里面有一长串 v-if 不同类型的图表组件）？有什么最佳做法吗？

/*
    Say I have a long list of diff type of charts, 
    when charttype matches, it will load that component, 
    otherwise load 404 component there. 
*/


 _______________________
 |    _____________    |
 |    |           |    |
 |    |   chart   |    |
 |    |___________|    |
 |_____________________|

我相信现在的v-if方式的长列表将很难维护，而且在未来，图表区域将是一组图表构建组合图表组件（例如4图表作为组合图表组件），所以我想必须有一种可配置的方式来做到这一点。

谢谢，

Answer 1

您可以在文档中查看Dynamic Components

<component :is="componentName"></component>

在 Vue 中基于 URL 参数更改组件的最佳实践

Best practice to change component based on URL params in Vue

vue.js

vue-router