Получить путь / маршрут / пространство имен для текущего / родительского компонента / представления в vue.js - PullRequest
Новая
       15

Получить путь / маршрут / пространство имен для текущего / родительского компонента / представления в vue.js

0 голосов
/ 29 января 2019

Я работал над системой подменю для vue.js, которая заполняется детьми текущего маршрута. Я недавно опубликовал вопрос об этом, и на него был дан ответ.

Сейчас я пытаюсь улучшить это, но у меня возникают проблемы с поиском пути к компоненту или пространству имен(не уверен, какое слово использовать).В настоящее время я вижу то, что я хочу в инструментах Vue Dev, но я просто не знаю, как получить эти свойства.

enter image description here

Я пытался {{$ route.path}}, но это только дает мне полный путь.

Еще одна вещь, которую я попробовал, какие виды подсказок - это сохранение текущего пути при первой загрузке меню.Который сохраняет путь, к которому я хочу присоединиться.Единственная проблема заключается в том, что когда я перехожу прямо на страницу, она загружает меню с URL-адресом страниц, что нарушает функциональность.

Вот код: 

<template>
  <nav id="sidebar">
    <div class="sidebar-header">
      <h3>Bootstrap Sidebar</h3>
    </div>
    <h2>Route: {{  }}</h2>
    <ul class="list-unstyled components" 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>

Я действительно хочу что-то ближек этому, хотя вместо использования $ route.path для возврата полного пути, например / traveler / Create Я хочу что-то просто вернуть / traveler или что-то ещепуть для его просмотра маршрутизатора: 

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

      <ul class="list-unstyled components" 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>

1 Ответ

0 голосов
/ 29 января 2019

Чтобы получить путь к текущему компоненту, мне просто нужно было использовать свойство $ Route.matched .В моем случае, поскольку я не хотел включать пути детей, я использовал первое совпадение, подобное этому $ Route.matched [0] .path

, вы можете узнать большеоб этом здесь

Я также использовал его, чтобы обновить свой другой вопрос / ответ

По сути, вы можете использовать его в шаблоне, подобном этому: 

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

      <ul class="list-unstyled components" 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>
...