将多个子路由添加到选项卡 - Ionic Vue.js答案

【问题标题】：Add multiple child routes to tab - Ionic Vue.js将多个子路由添加到选项卡 - Ionic Vue.js
【发布时间】：2021-08-28 07:25:29
【问题描述】：

我目前正在努力在使用 Ionic 和 Vue.js 的应用程序中向我的选项卡中添加多个子路由

这完全没问题：

{
    path: 'tab3',
    component: () => import('@/views/Tab3.vue')
  },
  {
    path: 'tab3/tab_new_sl',
    name: 'tab_new_sl',
    component: () => import('@/views/Tab_new_SL.vue')
  },

但是一旦我添加另一个子路由，应用程序就会崩溃：

{
    path: 'tab3',
    component: () => import('@/views/Tab3.vue')
  },
  {
    path: 'tab3/tab_new_sl',
    name: 'tab_new_sl',
    component: () => import('@/views/Tab_new_SL.vue')
  },
  {
    path: 'tab3/tab_show_list',
    name: 'tab_show_list',
    component: () => import('@/views/Tab_Show_list.vue')
  }

错误：

TypeError: undefined is not an object (evaluating 'modules[moduleId].call')
undefined
promiseReactionJob
27

也许你们中的一个可以告诉我我是如何定义多个子路由的

【问题讨论】：

标签： vue.js ionic-framework routes ionic4 vue-router

【解决方案1】：

我认为其他路径应该是子路径

https://github.com/aaronksaunders/ionic-vue3-sample-2/blob/master/src/router/index.ts

{
    path: 'tab3',
    component: () => import('@/views/Tab3.vue')
    children : [ 
     {
        path: 'tab3/tab_new_sl',
        name: 'tab_new_sl',
        component: () => import('@/views/Tab_new_SL.vue')
     },
     {
        path: 'tab3/tab_show_list',
        name: 'tab_show_list',
        component: () => import('@/views/Tab_Show_list.vue')
     }
    ]
}

【讨论】：