[solved] Can't get subroutes to work



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


  • Admin

    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



  • 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


  • Admin

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



  • 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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.