Hello, the link above (http://beta.quasar-framework.org/components/integrating-layout-with-router.html) is broken and I really struggle to make my subroutes working.

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '/', component: () => import('pages/Home.vue'), meta: { requiresLogin: true } },
      { path: '/home', component: () => import('pages/Home.vue'), meta: { requiresLogin: true } },
      { path: '/memberships', component: () => import('pages/Memberships.vue'), meta: { requiresLogin: true } },
      { path: '/calendar', component: () => import('pages/Calendar.vue'), meta: { requiresLogin: true } },
      { path: '/settings', component: () => import('pages/Settings.vue'), meta: { requiresLogin: true } },
      { path: '/login', component: () => import('pages/Login.vue') },
      {
        path: '/editvenue',
        component: EditPlace,
        children: [
          { path: 'test', name: 'EditVenue', component: () => import('pages/EditPlace') }
        ]
      }
    ]
  }
]

I tried everything and localhost:8080/editvenue/test is always broken:

GET http://localhost:8080/editvenue/app.js net::ERR_ABORTED 404 (Not Found)

Sorry for a stupid question but I’m desperate.

@matalsadman: I had to set history mode in quasar.conf.js:

 build: {  
              vueRouterMode: 'history',
        }

The children syntax didn’t work at all, but I simply could use the following:

{ path: '/editvenue/test', name: 'test', component: () => import('pages/EditPlace.vue') }

Everything works now. I’ll keep this post for anyone experiencing the same problem.

Hello, the link above (http://beta.quasar-framework.org/components/integrating-layout-with-router.html) is broken and I really struggle to make my subroutes working.

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '/', component: () => import('pages/Home.vue'), meta: { requiresLogin: true } },
      { path: '/home', component: () => import('pages/Home.vue'), meta: { requiresLogin: true } },
      { path: '/memberships', component: () => import('pages/Memberships.vue'), meta: { requiresLogin: true } },
      { path: '/calendar', component: () => import('pages/Calendar.vue'), meta: { requiresLogin: true } },
      { path: '/settings', component: () => import('pages/Settings.vue'), meta: { requiresLogin: true } },
      { path: '/login', component: () => import('pages/Login.vue') },
      {
        path: '/editvenue',
        component: EditPlace,
        children: [
          { path: 'test', name: 'EditVenue', component: () => import('pages/EditPlace') }
        ]
      }
    ]
  }
]

I tried everything and localhost:8080/editvenue/test is always broken:

GET http://localhost:8080/editvenue/app.js net::ERR_ABORTED 404 (Not Found)

Sorry for a stupid question but I’m desperate.