Wrong page rendering



  • 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:
    0_1537823581667_074d3603-56a1-4529-b51d-707844d2192f-image.png

    <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):
    0_1537823689553_6f4193e7-a7eb-4351-9680-414a74770fe7-image.png

    <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 🙂



  • 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
    


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