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



  • This is my current file I’m working with:
    https://github.com/wishinghand/OCA-Hackathon-2/blob/master/src/components/index.vue
    I have all of the routes in the router.js file.
    Whenever I click on each route, the tab bar disappears. I’m not sure what to do to prevent this action.



  • To clarify my issue a bit. I have 14 tabs that each link to their own .vue file. I want the <router-view></router-view> to get swapped out for each of these tabs. (Yes, I know I should have a more DRY approach but moving on…).

    Every time I click a tab in the component I linked above, I get taken to that tab, the URL changes properly, but the toolbar with all 14 tabs disappears, removed from the DOM. I’m pretty sure I’m following the Quasar docs to the letter but I can’t seem to get it to work with Vue-Router.



  • Maybe you are conflicting with the <router-view> found in App.vue ?



  • I’ve tried both <router-view></router-view> and <div class="layout-view"></div> but neither seems to work. The documentation says either can work, depending on your need for sub-routes. I’m not using sub routes so I could just do <div class="layout-view"></div>, but it doesn’t seem to fix my issue.



  • Sure, but where will the router insert the new component, in you index code or her in App.vue ? as far as i can se you have 2 router-viewcomponents.



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