Currently, I am working on developing a menu application using Vue JS. As per the advice given to me, it is suggested that I only need to use one component if the styling remains consistent throughout. This implies that I need to incorporate dynamic data into the application. Each menu or submenu will consist of 3 to 4 menu links. In my quest for finding a solution to pass variables along with data to a component, I stumbled upon 'props'. However, I encountered a challenge while trying to send props from different routes to the same component and determine the route being used in order to load the appropriate props into the HTML.
I have attempted to load props into a template, and this process worked smoothly. Nevertheless, the task of sending and replacing prop values within the same section of HTML remains something that eludes me.
{ path: '/list', component: List, props: { url: 'www.google.com' } }
<template>
<div class="container">
<h1>Welcome</h1>
<div class="row">
<div class="col-md-6">
<router-link to='/weed'>Weed</router-link>
</div>
<div class="col-md-6">
<router-link to='/stuff'>Stuff</router-link>
</div>
<div class="col-md-6">
<router-link to='/joint'>Joint</router-link>
</div>
<div class="col-md-6">
<router-link to='/edibles'>Edibles</router-link>
</div>
</div>
</div>
</template>
The <router-link> needs to be dynamic based on the current route, so that it can load different menu items accordingly.
My objective is to create a menu that displays varied route links depending on the active route.