[solved] Can't get subroutes to work

[danielo515]

Thank you very much @rstoenescu , that was the kind of documentation I was looking for. I literally scanned the entire documentation and I was unable to find it. It’s a pity that it is hidden on a different version documentation, specially because it is necessary to any beginner like me.

Now I have to see how can I use buttons to navigate without using tabs. Does this make any sense or should I stick to tabs? I was thinking about use a toolbar with buttons acting as links.

Again, thanks

[rstoenescu]

@danielo515 Glad it could help you. Quasar is based on Vue, Vue Router, Webpack etc. This assumes any user has knowledge of these technologies. Whenever in doubt, read their own documentation. Duplicating their own documentation into Quasar’s is not optimal anyways. This page is a “bonus” for Quasar developers and it’s part of v0.14 documentation because v0.14 is the future – in a few days (tomorrow or the day after tomorrow) v0.14 is going official, so the “main” documentation will be v0.14’s one.

[danielo515]

Hello @rstoenescu
Thank you again.
I am absolutely fine about checking Vue router or other external documentation. However the usage of tabs or toolbar buttons is a Quasar philosophy specific question. Tabs have several advantages, like being automatically selected in route navigation, however seems they are unable to attend click events. I just want to stick to framework good practices .

Regards

[ERtech]

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.

[metalsadman]

@ERtech try moving it not a child of /.

[ERtech]

This post is deleted!

[ERtech]

This post is deleted!

[ERtech]

This post is deleted!

[ERtech]

@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.

[tof06]

@ERtech Glad you get it to work !
But, about the children, did you try to remove the leading / from your path ?

According to vue-router documentation :

Note that nested paths that start with / will be treated as a root path. This allows you to leverage the component nesting without having to use a nested URL.