I can't seem to get routes done correctly [solved]



  • I intended to have the route in index.vue because of how the conventions of Quasar are setup.

    I was under the impression that Vue switched the router based on the context, so that the quasar-tabs and children should only effect the <router-view> on their level. Also, the Quasar boilerplate shows that a <router-view>-like component can be injected on the index.vue.

    <!--
          Replace following "div" with
          "<router-view class="layout-view">" component
          if using subRoutes
        -->
        <div class="layout-view">
        </div>
    


  • As this is really based on vue-router i guess you need to tell the router that this is a sub route, inside your router.js file.

    I quess (I am quite new to Quasar too) that you still need a route setup that indicate subRoutes children in the route.js file. If you don’t, i quess the router only replace the topmost router-view.

    I may have misunderstood the vue-router but I am not sure it automatically can quess the route context, you have to describe it in the mapping … as far as i understand it.



  • Looks like adding all of my tab components as a sub-route of ‘/’ was the answer. I didn’t fully understand the docs/routing concepts. Thanks for talking it out druppy.



  • You are welcome



  • @wishinghand

    You need to define subroutes.

    Doing this, you are replacing ( inside App.vue) “index” with eg. “juliet”
    0_1478426299376_img2404.jpg

    Do this you will be nesting “juliet” etc. inside “index”
    0_1478426241906_upload-a36b31fb-1c2f-4974-9511-e0db14c846d7



  • @wishinghand said in I can't seem to get routes done correctly:

    Looks like adding all of my tab components as a sub-route of ‘/’ was the answer. I didn’t fully understand the docs/routing concepts. Thanks for talking it out druppy.

    oops, already solved I see.



  • @Martin No that extra screenshot was useful, thanks :)



  • Another question, but related to this thread, is once I have the suggested setup for sub-routes and my basic navigation loads each given route, where does my original index content live and how does it get loaded? Do I set it as a default? I’m pretty sure I’m approaching that wrongly.



  • @davewallace I’m not sure if I understand your question but I am using my index.vue as a dashboard which gets loaded by default into the App.vue <router-view> cause index.vue is mapped to path ‘/’.
    So in my case, my index content holds some chart stuff, lists etc, but has no <router-view>
    If I then load let’s say CompanyList, <router-view> inside App.vue gets loaded with CompanyList.vue. (swap with index.vue )

    If I would want to keep my index content visible, whatever page I’m on, I would have to put a <router-view> inside my index.vue and set up router.js accordingly

    ‘/’ maps to /index
    children (shown in index.vue <router-view>):
    /index/companyList maps to CompanyList.vue
    /index/contactList maps to ContactList.vue



  • @Martin You’ve straightened that out for me, thank you, the stuff I’m working from has been cobbled together from a previously mostly working Vue prototype, turned into a Quasar prototype, doubtless I got a couple of things mixed up and then tried following the wrong thread; sub-routes, which I simply don’t need.


Log in to reply
 

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