I can't seem to get routes done correctly [solved]
-
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-view
components. -
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 topmostrouter-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
-
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”
-
@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.
-
@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
-
@arjanski Have you tried setting up a redirect? https://router.vuejs.org/en/essentials/redirect-and-alias.html
-
@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…
-
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?