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