I've been working on a sub menu system for vue.js that gets populated by the current route's children. I recently posted a question about it and it was answered here.

Now I'm trying to improve upon that but I'm having trouble finding out how to get a ponent's path or namespace (not sure what word to use). Currently I see what I want in the Vue Dev tools I just don't now how to get those properties.

I've tried {{$route.path}} but that only gives me the full path.

Another thing I've tried which kind of helps is storing the current path the first time I load the menu. Which preserves the path I want to be appending to. The only issue is when i navigate directly to the page it loads the menu with the pages url which then breaks the functionality.

Here is the code:

<template>
  <nav id="sidebar">
    <div class="sidebar-header">
      <h3>Bootstrap Sidebar</h3>
    </div>
    <h2>Route: {{  }}</h2>
    <ul class="list-unstyled ponents" v-for="(route, index) in $router.options.routes.filter(x=>x.path==path)">
      <li v-for="child in route.children">
        <a class="nav-item" :key="index">
          <router-link :to="{path: path+'/'+child.path}" exact-active-class="active">
            <icon :icon="route.icon" class="mr-2" /><span>{{ child.path }}</span>
          </router-link>
        </a>
      </li>
    </ul>

  </nav>

</template>

<script>
  export default {
    data() {
      return {
        path: this.$route.path
      }
    },
    methods: {
    },
  }
</script>

I really want something closer to this though, where instead of using $route.path to return the full path like /traveler/Create I want something to just return /traveler or whatever the path for it's router-view is:

<template>
    <nav id="sidebar">
      <div class="sidebar-header">
        <h3>Bootstrap Sidebar</h3>
      </div>

      <ul class="list-unstyled ponents" v-for="(route, index) in $router.options.routes.filter(x=>x.path==$route.path)">
        <li v-for="child in route.children">
          <a class="nav-item"  :key="index">
            <router-link :to="{path: $route.path+'/'+child.path, params: { idk: 1 }}" exact-active-class="active">
              <icon :icon="route.icon" class="mr-2" /><span>{{ child.path }}</span>
            </router-link>
          </a>
        </li>
      </ul>

    </nav>

</template>

<script>
    import { travelerroutes } from '../../router/travelerroutes'
    export default {
    data() {
      console.log(travelerroutes);
        return {
          travelerroutes,
          collapsed: true
        }
      },
      methods: {
        toggleCollapsed: function (event) {
          this.collapsed = !this.collapsed
        }
      }
    }
</script>

I've been working on a sub menu system for vue.js that gets populated by the current route's children. I recently posted a question about it and it was answered here.

Now I'm trying to improve upon that but I'm having trouble finding out how to get a ponent's path or namespace (not sure what word to use). Currently I see what I want in the Vue Dev tools I just don't now how to get those properties.

I've tried {{$route.path}} but that only gives me the full path.

Another thing I've tried which kind of helps is storing the current path the first time I load the menu. Which preserves the path I want to be appending to. The only issue is when i navigate directly to the page it loads the menu with the pages url which then breaks the functionality.

Here is the code:

<template>
  <nav id="sidebar">
    <div class="sidebar-header">
      <h3>Bootstrap Sidebar</h3>
    </div>
    <h2>Route: {{  }}</h2>
    <ul class="list-unstyled ponents" v-for="(route, index) in $router.options.routes.filter(x=>x.path==path)">
      <li v-for="child in route.children">
        <a class="nav-item" :key="index">
          <router-link :to="{path: path+'/'+child.path}" exact-active-class="active">
            <icon :icon="route.icon" class="mr-2" /><span>{{ child.path }}</span>
          </router-link>
        </a>
      </li>
    </ul>

  </nav>

</template>

<script>
  export default {
    data() {
      return {
        path: this.$route.path
      }
    },
    methods: {
    },
  }
</script>

I really want something closer to this though, where instead of using $route.path to return the full path like /traveler/Create I want something to just return /traveler or whatever the path for it's router-view is:

<template>
    <nav id="sidebar">
      <div class="sidebar-header">
        <h3>Bootstrap Sidebar</h3>
      </div>

      <ul class="list-unstyled ponents" v-for="(route, index) in $router.options.routes.filter(x=>x.path==$route.path)">
        <li v-for="child in route.children">
          <a class="nav-item"  :key="index">
            <router-link :to="{path: $route.path+'/'+child.path, params: { idk: 1 }}" exact-active-class="active">
              <icon :icon="route.icon" class="mr-2" /><span>{{ child.path }}</span>
            </router-link>
          </a>
        </li>
      </ul>

    </nav>

</template>

<script>
    import { travelerroutes } from '../../router/travelerroutes'
    export default {
    data() {
      console.log(travelerroutes);
        return {
          travelerroutes,
          collapsed: true
        }
      },
      methods: {
        toggleCollapsed: function (event) {
          this.collapsed = !this.collapsed
        }
      }
    }
</script>

• javascript
• vue.js
• vue-router

• 1 Try $route.path.name to get the name – elraphty Commented Jan 28, 2019 at 22:01
• That still gives me the name of the full route. I'm trying to get the parent router-view's path. So when I'm at "/traveller/Create", I want to somehow be able to get "/traveler" from the parent ponent. – Mark Commented Jan 28, 2019 at 22:08
• I believe that will only be possible if use vuex-router- sync u have to sync the router with your vuex store to achieve this – elraphty Commented Jan 28, 2019 at 22:13
• I do have vuex-router-sync referenced in my project. and sync the router in app.js. – Mark Commented Jan 28, 2019 at 22:18
• Please what do u really want to achieve is it a Breadcrumb? – elraphty Commented Jan 28, 2019 at 22:30

1 Answer 1

To get the path of the current ponent I had to just use the $Route.matched property. In my case because I didn't want to include the childrens' paths I used the first match like this $Route.matched[0].path

you can learn more about it here

I also used it to update my other question/answer

Essentially you can use it in a template like this:

<template>
    <nav id="sidebar">
      <div class="sidebar-header">
        <h3>Bootstrap Sidebar</h3>
      </div>

      <ul class="list-unstyled ponents" v-for="(route, index) in $router.options.routes.filter(x=>x.path==$route.matched[0].path)">
        <li v-for="child in route.children">
          <a class="nav-item"  :key="index">
            <router-link :to="route.path+'/'+child.path" exact-active-class="active">
              <icon :icon="route.icon" class="mr-2" /><span>{{ child.name }}</span>
            </router-link>
          </a>
        </li>
      </ul>

    </nav>

</template>

<script>
    export default {
    data() {
        return {
        }
      }
    }
</script>