Understanding ionic/vue-router structure

I have 3 top level routes. Conferences (Home), Venues, Speakers.

Screenshot 2020-10-29 at 11.37.421080×264 24.3 KB

• What is the right way of creating routes for these?
• Is children required for top level domains with no children?
• For Option A. Do I need path in route.children[ x ].path?

I tried both ways and they are both working.

I am using

"@ionic/vue": "^5.4.1",
"@ionic/vue-router": "^5.4.1",

Option A:

{
	path: '/',
	name: "conferences",
	component: Tabs,
	children: [
		{
			path: '/', // <-- Do I have to repeat this?
			component: () => import('@/views/Home.vue'),
			meta: {
				requiresAuth: false,
			}
		}
	]
},
{
	path: '/venues',
	name: "venues",
	component: Tabs,
	children: [
		{
			path: '/venues', // <-- Do I have to repeat this?
			component: () => import('@/views/Venues.vue'),
			meta: {
				requiresAuth: false,
			}
		},
	]
},
{
	path: '/speakers',
	name: "speakers",
	component: Tabs,
	children: [
		{
			path: '/speakers', // <-- Do I have to repeat this?
			component: () => import('@/views/Speakers.vue'),
			meta: {
				requiresAuth: false,
			}
		}
	]
}

Option 2

  {
    path: '/',
    name: "conferences",
    component: Tabs,
    children: [
      {
        path: '/',
        name: "conferences",
        component: () => import('@/views/Home.vue'),
        meta: {
          requiresAuth: false,
        }
      },
      {
        path: '/venues',
        name: "venues",
        component: () => import('@/views/Venues.vue'),
        meta: {
          requiresAuth: false,
        }
      },
      {
        path: '/speakers',
        name: "speakers",
        component: () => import('@/views/Speakers.vue'),
        meta: {
          requiresAuth: false,
        }
      }
    ]
  },

1 post - 1 participant

Read full topic