我试图在我的Vue应用程序上导航，以使所有根级路由都填充一个主菜单，如果该路由有任何子级，则提供一个侧面菜单。像这样：

我当前使用的设计具有主导航，其顶部带有路由链接，下面是路由器视图。我已经能够使侧面菜单正常工作，因此只有在选择“旅行者”并正确更新组件/内容时它才会显示。但是，我在正确路由时遇到了麻烦，当我单击子菜单中的链接之一时，它不会追加到当前路径。因此，当我在localhost / Traveler中单击“ 查看 ” 并单击“ 查看”时，URL更改为localhost / View /而不是localhost / Traveler / View。当我在子菜单中选择某些内容时，顶部菜单上的选择也不会被选择。

我无法通过类似到达网页本地主机/旅游/查看只有本地主机/查看

当我开始写这篇文章时，我开始重新阅读关于嵌套路由的文档，我想我意识到我应该在每个级别上创建一个新的路由器，这不是我在下面的代码中所做的。

我也不确定如何访问当前路线的子级。我试图像这样显示它们：

  <h2>Route: {{ $route.name }}</h2>
  <ul id="example-1">
    <li v-for="child in $route.children">
      {{ child.name }}
    </li>
  </ul>

但是我什么也没得到。它们应该以Params或其他形式传递吗？还是不那么容易获得？

任何建议或帮助将不胜感激。

根

包含顶部的Menu-Nav，其中包含路由器链接和下面的router-view。

<template>
  <div id="app" class="container-fluid">
    <div class="row">
      <div style="width:100%">
        <nav-menu params="route: route"></nav-menu>
      </div>

    </div>

    <div class="row">
      <div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
  import NavMenu from './nav-menu'

  export default {
    components: { …

我一直在为 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> …

背景

因此，我有一个用于自动搜索零件表的自动完成输入。零件表具有标识列，零件号列，修订版列，描述列和其他一些信息列。

我可以使用它，因此在文本字段中键入时，自动完成选项会显示零件号，转速和描述，并按零件号过滤零件。

问题

但是我的目标是能够同时过滤零件号和描述。

我曾尝试修改item-text =“ fpartno”，但无法弄清楚如何使其与两个或多个属性一起使用。而且，我在网上找到的大多数解决方案只会影响选项的显示方式，而不会影响其过滤方式。

同样，删除项目文本也不起作用。

码

我将自动完成功能放入“单页组件”中。我目前正在使用Typescript，但我也会接受使用javascript的答案。如果我只能使用理想的模板语法。

注意：属性fcomment包含描述，以防万一。

<template>
    <v-container fluid grid-list-xl>
        <v-layout wrap align-center>
            <v-flex xs12 sm6 d-flex>
                <v-autocomplete :items="inmastxs"
                                label="Part #"
                                item-value="identity_column"
                                item-text="fpartno"
                                cache-items
                                :search-input.sync="search"
                                solo>
                    <template slot="selection" slot-scope="data">
                        {{ data.item.fpartno }} - {{ data.item.frev }} ({{ data.item.fcomment }})
                    </template>
                    <template slot="item" slot-scope="data">
                        {{ data.item.fpartno }} - {{ data.item.frev }} ({{ data.item.fcomment }})
                    </template>

                </v-autocomplete>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script lang="ts">

    import Vue from 'vue'
    import { …