title: Vue: Header Navigation in App.vue but modifed in Different views?
body: <p>Ive been stuck on the best way to manage a header navigation in Vue 2, vuex with VueRouter.
  I have a main 'header' type navigation in my App.vue</p>
  
  <pre><code>    &lt;div id="nav"&gt;
        &lt;!--Try and create a dynamic nav--&gt;
        &lt;span v-for="route in routes" :key="route.to"&gt;
          &lt;router-link :to="`${route.to}`"&gt;{{route.text}}&lt;/router-link&gt; |
        &lt;/span&gt;
      &lt;/div&gt;
      &lt;b-container&gt;
        &lt;router-view /&gt;
      &lt;/b-container&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I was hoping as, the user navigates around the page and into other views and components within views. That i could update the 'routes' array to push the current location they are in. Obviously this is very Non Vue since it would require a global variable of some sort. I was curious if the best way to go about updating a header nav when you are working with nested routes.</p>
  
  <p>Example of routes:</p>
  
  <pre><code>  {
      path: '/Teams',
      name: 'Teams',
      component: Teams
    },
    {
      path: '/:teamName/Athletes',
      name: 'Athletes',
      component: Athletes
    },
    {
      path: '/:teamName/Athletes/:id',
      name: 'Athlete',
      component: Athlete
    }
  </code></pre>
  
  <p>What i would like is for when you are on the Athlete page, you could have a route back to athletes ON the App.vue header nav, that is dynamic with the selected :teamName. That could be removed and added as necessary.</p>
  
  <p>Example of user story: /Teams-> Selects team 'Team1' -> Sends them to /Team1/Atheltes -> clicks an athlete -> sends them to /Team1/Athlete/1.  In the header nav (Which is cucrently in App.vue) how can i add a router-link to include the appropriate ':teamName' to be able to go back to /Team1/Athletes?</p>