Vue.js 与'；Vuetify材质仪表板'；，抽屉中的儿童链接

我正在使用（Vuetify Material Dashboard）免费版，在添加子链接时遇到问题，指令也出现问题。。 问题如下

这是抽屉代码：

<template>
  <v-navigation-drawer
    id="core-navigation-drawer"
    v-model="drawer"
    :dark="barColor !== 'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)'"
    :expand-on-hover="expandOnHover"
    :right="$vuetify.rtl"
    :src="barImage"
    mobile-break-point="960"
    app
    width="260"
    v-bind="$attrs"
  >
    <template v-slot:img="props">
      <v-img
        :gradient="`to bottom, ${barColor}`"
        v-bind="props"
      />
    </template>

    <v-divider class="mb-1" />

    <v-list
      dense
      nav
    >
      <v-list-item>
        <v-list-item-avatar
          class="align-self-center"
          color="white"
          contain
        >
          <v-img
            src="https://demos.creative-tim.com/vuetify-material-dashboard/favicon.ico"
            max-height="30"
          />
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title
            class="display-1"
            v-text="profile.title"
          />
        </v-list-item-content>
      </v-list-item>
    </v-list>

    <v-divider class="mb-2" />

    <v-list
      expand
      nav
    >
      <!-- Style cascading bug  -->
      <!-- https://github.com/vuetifyjs/vuetify/pull/8574 -->
      <div />

      <template v-for="(item, i) in computedItems">
        <base-item-group
          v-if="item.children"
          :key="`group-${i}`"
          :item="item"
        >
          <!--  -->
        </base-item-group>

        <base-item
          v-else
          :key="`item-${i}`"
          :item="item"
        />
      </template>

      <!-- Style cascading bug  -->
      <!-- https://github.com/vuetifyjs/vuetify/pull/8574 -->
      <div />
    </v-list>

    <template v-slot:append>
      <base-item
        :item="{
          title: 'Logout',
          icon: 'mdi-logout',
        }"
      />
    </template>
  </v-navigation-drawer>
</template>

<script>
  // Utilities
  import {
    mapState,
  } from 'vuex'

  export default {
    name: 'DashboardCoreDrawer',
    props: {
      expandOnHover: {
        type: Boolean,
        default: false,
      },
    },
    data: () => ({
      items: [
        {
          icon: 'mdi-view-dashboard',
          title: 'dashboard',
          to: '/',
        },
        // Employees
        {
          icon: 'mdi-account-multiple',
          title: 'Employees',
          group: 'employees',
          children: [
            {
              title: 'Show Employees',
              to: 'show',
            },
            {
              title: 'Add New',
              to: 'add',
            },
          ],
        },
        // Customers
        {
          icon: 'mdi-account-box-multiple',
          title: 'Customers',
          group: 'customers',
          children: [
            {
              title: 'Show Customers',
              to: 'show' ,
            },
            {
              title: 'Add New',
              to: 'add',
            },
          ],
        },
        {
          icon: 'mdi-account',
          title: 'user',
          to: '/pages/user',
        },
      ],
    }),

    computed: {
      ...mapState(['barColor', 'barImage']),
      drawer: {
        get () {
          return this.$store.state.drawer
        },
        set (val) {
          this.$store.commit('SET_DRAWER', val)
        },
      },
      computedItems () {
        return this.items.map(this.mapItem)
      },
      profile () {
        return {
          avatar: true,
          title: this.$t('avatar'),
        }
      },
    },

    methods: {
      mapItem (item) {
        return {
          ...item,
          children: item.children ? item.children.map(this.mapItem) : undefined,
          title: this.$t(item.title),
        }
      },
    },
  }
</script>

当我在任何一个子页面上，想转到这里的另一个页面时，真正的问题就出现了。 例如，当我在“员工显示”页面上，并且我想转到“添加”页面时，该页面将不显示，链接显示如下：

朋友们，有什么解决办法吗？

---

非常感谢问题已经解决了。。 原因是路径中缺少标记。 我花了很多时间才发现的一个简单的错误。 我希望没有人会犯这个错误。 感谢那些试图帮助我的人

在路由器文件中修改的代码：

// Employees
        {
          name: 'Show Employees',
          path: '/employees/show',
          component: () => import('@/views/dashboard/employees/showEmployees'),
        },
        {
          name: 'Add New Employee',
          path: '/employees/add',
          component: () => import('@/views/dashboard/employees/addEmployees'),
        },
// Customers
        {
          name: 'Show Customers',
          path: '/customers/show',
          component: () => import('@/views/dashboard/customers/showCustomers'),
        },
        {
          name: 'Add New Customers',
          path: '/customers/add',
          component: () => import('@/views/dashboard/customers/addCustomers'),
        },

Ind抽屉文件仅添加/在组名之前。。 出票人代码：

// Employees
        {
          icon: 'mdi-account-multiple',
          title: 'Employees',
          group: '/employees',
          children: [
            {
              title: 'Show Employees',
              to: 'show',
            },
            {
              title: 'Add New',
              to: 'add',
            },
          ],
        },
        // Customers
        {
          icon: 'mdi-account-box-multiple',
          title: 'Customers',
          group: '/customers',
          children: [
            {
              title: 'Show Customers',
              to: 'show' ,
            },
            {
              title: 'Add New',
              to: 'add',
            },
          ],
        },
          

---

你能公布你得到的实际错误吗？看起来你的路由名称与data.links中的路由名称不匹配。例如，您将路线名称设置为

show

和

add

，当它应该类似于

showcusters

或

addCustomer

时，为了简单起见，您需要将路线

name

字段更改为驼峰大小写，这是JS的标准。还有，基本项是什么？这不是vuetify组件，应该是v-list-item，除非它是作为包装器创建的。实际上没有错误。问题是当我移动到另一个页面时，当前页面文件夹名称会重复，并且没有具有此名称的页面，因此它是空的。例如：url为=>/customers/show when move to另一个页面“user page”=>/cusomers/pages/user或“add employess”=>/customers/employess/add

// Employees
        {
          icon: 'mdi-account-multiple',
          title: 'Employees',
          group: '/employees',
          children: [
            {
              title: 'Show Employees',
              to: 'show',
            },
            {
              title: 'Add New',
              to: 'add',
            },
          ],
        },
        // Customers
        {
          icon: 'mdi-account-box-multiple',
          title: 'Customers',
          group: '/customers',
          children: [
            {
              title: 'Show Customers',
              to: 'show' ,
            },
            {
              title: 'Add New',
              to: 'add',
            },
          ],
        },