vuetify 路由器链接不适用于抽屉儿童答案

【问题标题】：vuetify router link does not work on drawer childrenvuetify 路由器链接不适用于抽屉儿童
【发布时间】：2020-08-23 05:02:33
【问题描述】：

我正在开发 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/

【问题讨论】：

我也有类似的问题，你们能帮帮我吗..stackoverflow.com/questions/66224800/…

标签： vuetify.js

【解决方案1】：

您要做的是，添加属性“组”并将其分配给您的文件夹组件，在这种情况下，您的组将是 'pages'，而您的 'to' 属性将是“/局”所以在你的抽屉里改变这个

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

【讨论】：