Vue JS, menu dat bestaat uit 1 component.

Ik heb een Vue JS project aangemaakt. Dit heb ik gedaan omdat het handig is om one page applicaties te maken. Ik heb namelijk een menu gemaakt. Omdat ik hetzelfde component wil gebruiken (dezelfde styling etc.) Moet ik de routes van de submenu's etc. door kunnen sturen en in het template op de juiste plek kunnen plaatsen. Ik zat zelf te denken aan door het met props mee te sturen, een simpel voorbeeld:

{ path: '/food', component: Menu, props: {url_1: '/cold_food', url_1_name: 'Cold Food', url_2: '/warm_food', url_2_name: 'Warm food' } }
{ path: '/drinks', component: Menu, props: {url_1: '/cold_drinks', url_1_name: 'Cold Drinks', url_2: '/warm_drinks', url_2_name: 'Warm drinks' } }

Met deze code duid ik aan dat de variabelen in dat component kunnen overschreven worden aan de hand van op welke router je zit.

Ik vroeg me alleen af of er geen betere manier was om dit zo te doen?