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

[wishinghand]

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.

[wishinghand]

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.

[druppy]

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

[wishinghand]

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.

[druppy]

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.

[wishinghand]

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>

[druppy]

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.

[wishinghand]

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.

[druppy]

You are welcome

[Martin]

@wishinghand

You need to define subroutes.

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

Do this you will be nesting “juliet” etc. inside “index”

[Martin]

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

[davewallace]

@Martin No that extra screenshot was useful, thanks

[davewallace]

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.

[Martin]

@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

[davewallace]

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

[arjanski]

@Martin @davewallace Thank you for this thread - I was asking myself the same question but I still have one question which I can’t wrap my head around.

This coincides with dave’s last question: How do I set the initial page when

‘/’ maps to /index.vue
(My index has a toolbar and a footer, and inbetween there’s the router-view element.)

and you have children, including e.g.

/start (which hosts the content that is supposed to be shown when starting the app, but within q-layout of index.vue)

Right now, ‘/’ takes me to the index page, showing the toolbar and the footer, but no content. ‘/start’ shows the desired starting content, but is obviously not the starting point of the app.

How would I set up my routes so that a child of index is automatically loaded, or am I taking a completely wrong angle on this? As far as I understand q-layout (and router-view), simply pasting my starting content into index will miss the point obviously as it won’t get dynamically swapped by router-view, but what’s the alternative?

Thank you very much in advance for anyone enlightening me on this

[a47ae]

@arjanski Have you tried setting up a redirect? https://router.vuejs.org/en/essentials/redirect-and-alias.html

[arjanski]

@a47ae Thanks, I think a redirect would not work in this case, or am I wrong? Even if redirecting from “/” to “start” would not get me there, as “index” holds q-layout (including header and footer). So I would have my content, but without the navigation…

[Martin]

I have a splash screen mapped to ‘/’ so the app always open with splash.vue.
However, in the splash component I use the created() method to conditionally redirect to another page.

created () {
      if (....) {
        router.push(...)
      }
      else {
        router.push(...)
      }
  } 

Maybe this approach works for you?