vuetify.js - vuetify 路由器链接不适用于抽屉儿童

问题描述

我正在开发 vuetify 抽屉，当我单击每个抽屉时，它会导航到另一个页面，所以我认为如果我为每个抽屉添加一些子项会很酷，但是之后当我单击每个子项时，它会导航到错误的页面.

在添加儿童之前的抽屉代码......工作正常的那个

data: () => ({
  items: [
    {
      icon: 'mdi-view-dashboard',
      title: 'Dashboard',
      to: '/',
    },
    {
      icon: 'mdi-account',
      title: 'First',
    },
    {
      icon: 'mdi-account',
      title: 'Second',
      to: '/pages/mesebo',
    },
  ],
}),

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),
    }
  },
},

路由器代码

export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      component: () => import('@/views/dashboard/Index'),
      children: [
        // Dashboard
        {
          name: 'Dashboard',
          path: '',
          component: () => import('@/views/dashboard/Dashboard'),
        },
        // Pages
        {
          name: 'First',
          path: 'pages/burea',
          component: () => import('@/views/dashboard/pages/Bureau'),
        },
        {
          name: 'Second',
          path: 'pages/mesebo',
          component: () => import('@/views/dashboard/pages/Mesebo'),
        },
      ],
    },
  ],
})

添加孩子后的抽屉代码

data: () => ({
  items: [
    {
      icon: 'mdi-view-dashboard',
      title: 'Dashboard',
      to: '/',
    },
    {
      icon: 'mdi-account',
      title: 'First',
      children: [
        {
          title: 'sub-first',
          to: '/pages/bureau',
        },
      ],
    },
    {
      icon: 'mdi-account',
      title: 'Second',
      to: '/pages/mesebo',
      children: [
        {
          title: 'sub-second',
          to: '/pages/mesebo',
        },
      ],
    },
  ],
})
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),
    }
  },
},

添加孩子之前的抽屉视图

添加孩子后的抽屉视图

我没有更改 router.js 文件，我唯一做的就是将“to：'/pages/bureau'”从以前的位置变为子级，但是当您查看屏幕截图时，它正在进入到另一个未定义的链接，我使用的模板是。https://demos.creative-tim.com/vuetify-material-dashboard/

标签： vuetify.js

您需要做的是，添加属性“组”并将其分配给组件的文件夹，在这种情况下，您的组将是“页面”，而您的“到”属性将是“/bureau”，因此在您的抽屉上更改此

{
  icon: 'mdi-account',
  title: 'First',
  children: [
    {
      title: 'sub-first',
      to: '/pages/bureau',
    },
  ],
},

进入这个

{
  icon: 'mdi-account',
  title: 'First',
  group: 'pages',
  children: [
    {
      title: 'sub-first',
      to: '/bureau',
    },
  ],
},

vuetify.js - vuetify 路由器链接不适用于抽屉儿童

问题描述

解决方案

推荐阅读