抽屉子链接中 'Vuetify Material Dashboard' 的问题

Question

我正在使用 (Vuetify Material Dashboard) free 版本，添加 sub 时出现问题-links 指令有问题.. 问题如下..

这是抽屉代码：

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

This is the resulting shape

这是路由器代码：

import Vue from 'vue'
import Router from 'vue-router'
import store from './store/store'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      name: 'login',
      path: '/login',
      component: () => import('@/views/Login'),
    },
    {
      path: '/',
      component: () => import('@/views/dashboard/Index'),
      beforeEnter: (to, from, next) => {
        if (!store.getters['auth/authenticated']) {
          return next({
            name: 'login',
          })
        }
        next()
      },
      children: [
        // Dashboard **
        {
          name: 'Dashboard',
          path: '',
          component: () => import('@/views/dashboard/Dashboard'),
        },
        // Pages **
        // 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'),
        },
        {
          name: 'User Profile',
          path: 'pages/user',
          component: () => import('@/views/dashboard/pages/UserProfile'),
        },
      ],
    },
  ],
})

当我在任何子页面上并想移动到这里的另一个页面时，真正的问题就出现了。比如我在员工展示页面，想去添加页面，页面不显示，出现link如下： URL after translate to any page

朋友们有什么解决办法吗？非常感谢..

Answer 1

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

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

// 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',
            },
          ],
        },

抽屉子链接中 'Vuetify Material Dashboard' 的问题

Problem with the 'Vuetify Material Dashboard', in Drawer children links

vue.js

vue-router

vue-component

vuetify.js