title: How to implement sub menu of the current route's children with vue.js and vue router
body: <p>I'm trying to have the navigation on my Vue app to have a main menu up top populated by all the root level routes, and a side menu if the route has any children. Like so:</p>
  
  <p><a href="https://i.stack.imgur.com/C0VFJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/C0VFJ.png" alt="Goal"></a></p>
  
  <p>The current Design I have has the main navigation with routing links on the top with the router-view below. I have been able to get the side menu working so it it only shows up when I choose Travellers and updates the components/content correctly. However I'm having trouble routing things correctly, when I click on one of the links in the sub menu it does not append to the current path. So when I click on View when I'm in <strong>localhost/Traveler</strong> and click <strong>View</strong> the url changes to <strong>localhost/View/</strong> instead of <strong>localhost/Traveler/View</strong>. Also the selection on the top menu gets unselected when I choose something in the child menu.</p>
  
  <p><a href="https://i.stack.imgur.com/zb0bx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zb0bx.png" alt="Unselecting"></a></p>
  
  <p>And I cannot get to the pages via something like <strong>localhost/Traveler/View</strong> only <strong>localhost/View</strong> </p>
  
  <p>I started rereading the documentation on <a href="https://router.vuejs.org/guide/essentials/nested-routes.html" rel="noreferrer">nested routes</a> as I began making this post and I think I realized that I should be creating an new router at each level which is not something I have done in my code below.</p>
  
  <p>I'm also not sure how to access the children of the current route. I've tried to display them like so:</p>
  
  <pre><code>  &lt;h2&gt;Route: {{ $route.name }}&lt;/h2&gt;
    &lt;ul id="example-1"&gt;
      &lt;li v-for="child in $route.children"&gt;
        {{ child.name }}
      &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>But I get nothing. Should they be passed as Params or something? Or are the not that easily accessible?</p>
  
  <p>Any advice or help will be greatly appreciated.</p>
  
  <h1>Root</h1>
  
  <p>Contains top Menu-Nav with router links and router-view below.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app" class="container-fluid"&gt;
      &lt;div class="row"&gt;
        &lt;div style="width:100%"&gt;
          &lt;nav-menu params="route: route"&gt;&lt;/nav-menu&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
    import NavMenu from './nav-menu'
  
    export default {
      components: {
        'nav-menu': NavMenu
      },
  
      data() {
        return {}
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <h1>Top Nav-Menu</h1>
  
  <p>Gets populated with the routes</p>
  
  <pre><code>&lt;template&gt;
    &lt;nav class="site-header sticky-top py-1"&gt;
      &lt;div class="container d-flex flex-column flex-md-row justify-content-between"&gt;
        &lt;a class="nav-item" v-for="(route, index) in routes" :key="index"&gt;
          &lt;router-link :to="{path: route.path, params: { idk: 1 }}" exact-active-class="active"&gt;
            &lt;icon :icon="route.icon" class="mr-2" /&gt;&lt;span&gt;{{ route.display }}&lt;/span&gt;
          &lt;/router-link&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/template&gt;
  &lt;script&gt;
    import { routes } from '../router/routes'
  
    export default {
      data() {
        return {
          routes,
          collapsed: true
        }
      },
      methods: {
        toggleCollapsed: function (event) {
          this.collapsed = !this.collapsed
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <h1>Traveler Page/View</h1>
  
  <p>Currently the Traveller Page which has a side bar menu and another router view for the content:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app" class="container-fluid"&gt;
      &lt;div class="wrapper"&gt;
        &lt;traveler-menu params="route: route"&gt;&lt;/traveler-menu&gt;
  
        &lt;div id="content"&gt;
          &lt;router-view name="travlerview"&gt;&lt;/router-view&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
    import TravelerMenu from './traveler-menu'
    export default {
      components: {
        'traveler-menu': TravelerMenu
      },
      data() {
        return {}
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <h1>Side Bar/ Traveler Menu</h1>
  
  <pre><code>&lt;template&gt;
      &lt;nav id="sidebar"&gt;
        &lt;div class="sidebar-header"&gt;
          &lt;h3&gt;Route's Children:&lt;/h3&gt;
        &lt;/div&gt;
  
        &lt;ul class="list-unstyled components"&gt;
          &lt;li&gt;
            &lt;a class="nav-item" v-for="(route, index) in travelerroutes" :key="index"&gt;
              &lt;router-link :to="{path: route.path, params: { idk: 1 }}" exact-active-class="active"&gt;
                &lt;icon :icon="route.icon" class="mr-2" /&gt;&lt;span&gt;{{ route.display }}&lt;/span&gt;
              &lt;/router-link&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  
      &lt;/nav&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
      import { travelerroutes } from '../../router/travelerroutes'
      export default {
      data() {
        console.log(travelerroutes);
          return {
            travelerroutes,
            collapsed: true
          }
        },
        methods: {
          toggleCollapsed: function (event) {
            this.collapsed = !this.collapsed
          }
        }
      }
  &lt;/script&gt;
  </code></pre>
  
  <h1>Routes</h1>
  
  <pre><code>import CounterExample from 'components/counter-example'
  import FetchData from 'components/fetch-data'
  import HomePage from 'components/home-page'
  import TestPage from 'components/test-page'
  import Travelers from 'components/Traveler/traveler-root'
  import { travelerroutes } from './travelerroutes'
  
  export const routes = [
    { name: 'home', path: '/', component: HomePage, display: 'Home', icon: 'home' },
    { name: 'counter', path: '/counter', component: CounterExample, display: 'Counter', icon: 'graduation-cap' },
    { name: 'fetch-data', path: '/fetch-data', component: FetchData, display: 'Fetch data', icon: 'list' },
    { name: 'test-page', path: '/test-page', component: TestPage, display: 'Test Page', icon: 'list' },
    {
      name: 'traveler-root', path: '/traveler', component: Travelers, display: 'Travelers', icon: 'list', children: travelerroutes
    }
  ]
  </code></pre>
  
  <h1>Traveler Routes (travelerroutes.js)</h1>
  
  <pre><code>import TestPage from 'components/test-page'
  import ViewTravelers from 'components/Traveler/TravelerPages/view-travelers'
  
  export const travelerroutes = [{
    name: 'View',
    path: '/View',
    display: 'View', icon: 'list',
    components: {
      travlerview: TestPage
    }
  },
    {
      name: 'Create',
      path: '/Create',
      display: 'Create', icon: 'list',
      components: {
        travlerview: ViewTravelers
      }
    },
    {
      name: 'Edit',
      path: '/Edit',
      display: 'Edit', icon: 'list',
      components: {
        travlerview: ViewTravelers
      }
    }];
  </code></pre>
  
  <h1>router/index.js</h1>
  
  <pre><code>import Vue from 'vue'
  import VueRouter from 'vue-router'
  import { routes } from './routes'
  
  Vue.use(VueRouter)
  
  let router = new VueRouter({
    mode: 'history',
    routes
  })
  
  export default router
  </code></pre>
  
  <h1>app.js</h1>
  
  <pre><code>import Vue from 'vue'
  import axios from 'axios'
  import router from './router/index'
  import store from './store'
  import { sync } from 'vuex-router-sync'
  import App from 'components/app-root'
  import { FontAwesomeIcon } from './icons'
  
  // Registration of global components
  Vue.component('icon', FontAwesomeIcon)
  
  Vue.prototype.$http = axios
  
  sync(store, router)
  
  const app = new Vue({
    store,
    router,
    ...App
  })
  
  export {
    app,
    router,
    store
  }
  </code></pre>
  
  <p>Let me know if you you need anymore details, context or code.</p>