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

Question

我一直在为 vue.js 开发一个子菜单系统，该系统由当前路由的子级填充。 I recently posted a question about it and it was answered here.

现在我正在尝试改进这一点，但我无法找到如何获取组件的路径或 namespace (不知道该使用什么词)。目前，我在 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 或其路由器 View 的路径是:

<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 属性。就我而言，因为我不想包含 child 的路径，所以我使用了第一个匹配，例如 $Route.matched[0].path

you can learn more about it here

I also used it to update my other question/answer

本质上，您可以在如下模板中使用它:

<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>