Question

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

现在，我正在尝试对此进行改进，但在查找如何获取组件的路径或名称空间（不确定使用哪个词）时遇到了麻烦。目前，我在Vue Dev工具中看到了我想要的东西，但现在我不知道如何获取这些属性。

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

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>

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

1 个答案: