在 vue.js 中获取当前/父组件/视图的路径/路由/命名空间

Question

我一直在为 vue.js 开发一个子菜单系统，该系统由当前路由的子级填充。我最近发布了一个关于它的问题，并在这里得到了解答。

现在我正在尝试改进这一点，但我无法找到如何获取组件的路径或名称空间（不确定使用什么词）。目前我在 Vue 开发工具中看到了我想要的东西，但我现在不知道如何获取这些属性。

我尝试过 {{$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>

Answer 1

要获取当前组件的路径，我必须使用$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>