Wrong page rendering

[vitorfhc]

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

[Hawkeye64]

A couple of things I see different frommine. Not sure if it’ll help:
first my routes file:

export default [
  {
    path: '/',
    component: () => import('layouts/default'), // <- here
    children: [
      {
        path: '',
        name: 'home',
        component: () => import('pages/index') // <- here
      },
      {
        path: 'live-view',
        name: 'live-view',
        component: () => import('pages/LiveView'), // <- here
        meta: {
          requiresAuth: true,
          permissions: ['liveview']
        }
      },

Then my layout is:

   q-layout
      q-page-container // <- here
        router-view

[ouaR]

@vitorfhc Use <router-link> instead of <a> tag