Started today with Quasar and can’t figure out this one.

I have this routes.js:

const routes = [
  {
    path: '/',
    component: () => import('../layouts/Default.vue'),
    children: [
      { path: 'login', component: () => import('../pages/Login.vue') },
      { path: '', component: () => import('../pages/Index.vue') }
    ]
  }
]

if (process.env.MODE !== 'ssr') {
  routes.push({
    path: '*',
    component: () => import('pages/Error404.vue')
  })
}

export default routes

But when accessing /index and /login I get the same page rendered.

/index:

<template lang="pug">
  div
    a(href="/index") index page
    br
    a(href="/login", title="title") login page
    br
    p this is index
</template>

<style>
</style>

<script>
export default {
  name: 'PageIndex'
}
</script>

/login (loading the index page as seen in the photo):

<template lang="pug">
  div
    a(href="/index") index page
    br
    a(href="/login", title="title") login page
    br
    p this is login
</template>

<script>
export default {
  name: 'PageLogin'
}
</script>

<style>
</style>

Default.vue:

<template lang="pug">
  q-layout
    q-page
      router-view
</template>

<script>
export default {
  name: 'LayoutDefault'
}
</script>

<style>
</style>

Please, help me figure this one out