[solved] Can't get subroutes to work

danielo515

Hello,

Maybe I’m too stupid to understand the documentation, or the basic template, but I’m having a bad time making sub-routes to work. I have a basic layout, with three columns, where the first one is the one containing the router-view. Then I have created one component, and one route. The problem is that when I click on the link, it renders the entire page, instead of rendering the component inside the route view. Here is my (very basic) setup

router.js

  import Vue from 'vue'
  import VueRouter from 'vue-router'

  Vue.use(VueRouter)

  function load (component) {
    return () => System.import(`components/${component}.vue`)
  }

  export default new VueRouter({
    /*
    * NOTE! VueRouter "history" mode DOESN'T works for Cordova builds,
    * it is only to be used only for websites.
    *
    * If you decide to go with "history" mode, please also open /config/index.js
    * and set "build.publicPath" to something other than an empty string.
    * Example: '/' instead of current ''
    *
    * If switching back to default "hash" mode, don't forget to set the
    * build publicPath back to '' so Cordova builds work again.
    */

    routes: [
      { path: '/', component: load('index') }, // Default
      { path: '/extract', component: load('extract') },
      { path: '*', component: load('Error404') } // Not found
    ]
  })

index.vue

    <template>
      <q-layout>
        <div slot="header" class="toolbar">
          <q-toolbar-title :padding="1">
            <q-tab icon="mail" route="/extract" exact>Extract</q-tab>
          </q-toolbar-title>
        </div>

        <q-drawer ref="drawer">
          <div class="list no-border platform-delimiter">
            <router-view ></router-view>
          </div>
        </q-drawer>
      </q-layout>
    </template>

    <script>
    export default {
      data () {
        return {}
      }
    }
    </script>

    <style>
    </style>

The component is just a hello world component.
What am I doing wrong? The routes? The router-view ? The link?

Thanks in advance.

rstoenescu

Hi,

Take a look at http://beta.quasar-framework.org/components/integrating-layout-with-router.html
Pay attention to “children” prop in routes object. Disregard the doc page is for v0.14 as same thing applies to all Quasar versions.

-Razvan

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.

No More Posting New Topics!

[solved] Can't get subroutes to work