Struggling to find the best approach for managing a header navigation in Vue 2 using Vuex with VueRouter. The main issue is creating a dynamic 'header' type navigation in App.vue.
<div id="nav">
<!--Trying to create a dynamic nav-->
<span v-for="route in routes" :key="route.to">
<router-link :to="`${route.to}`">{{route.text}}</router-link> |
</span>
</div>
<b-container>
<router-view />
</b-container>
</div>
My goal is to update the 'routes' array as the user navigates through different views and components within views, reflecting the current location they are in. However, I understand that this approach is not typical in Vue as it would require a global variable of some sort. I am exploring the best way to handle updating a header nav when dealing with nested routes.
Sample routes:
{
path: '/Teams',
name: 'Teams',
component: Teams
},
{
path: '/:teamName/Athletes',
name: 'Athletes',
component: Athletes
},
{
path: '/:teamName/Athletes/:id',
name: 'Athlete',
component: Athlete
}
I aim to include a route back to the Athletes page when on the Athlete page, dynamically displaying the selected ':teamName' on the header navigation in App.vue. This link should be adjustable based on the context.
User story example: /Teams -> Chooses team 'Team1' -> Redirected to /Team1/Atheltes -> selects an athlete -> redirected to /Team1/Athlete/1. How can I add a router-link in the header nav (currently in App.vue) to enable going back to /Team1/Athletes including the appropriate ':teamName'?