CODEWITHSUNDEEP
vue.jsvue-router
Kuan
Kuan

Reputation: 11389

Best practice to change component based on URL params in Vue

Just curious, for a route like /chart/:charttype

I want to load different type of chart components into that chart area, how to plan this in VueRouter(currently I only put /chart/:charttype there) and component( currently I put a container component there, inside which, there is a long list of v-if different type of chart components )? Any best practice?

/*
    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   |    |
 |    |___________|    |
 |_____________________|

I believe current long list of v-if way will be very hard for maintenance, also, in the future, that chart area will be a a group of charts which build a combo chart component(such as 4 charts as a combo chart component), so I guess there has to be a configurable way to do this.

Thanks,

Upvotes: 0

Views: 1825

Answers (1)

Mohd_PH
Mohd_PH

Reputation: 1677

You can check Dynamic Components in the docs

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

Upvotes: 4

Related Questions