No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    6
    19
    9665
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • druppy
      druppy last edited by

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

      1 Reply Last reply Reply Quote 0
      • W
        wishinghand last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • druppy
          druppy last edited by

          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.

          1 Reply Last reply Reply Quote 0
          • W
            wishinghand last edited by 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>
            
            Martin 1 Reply Last reply Reply Quote 0
            • druppy
              druppy last edited by

              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.

              1 Reply Last reply Reply Quote 1
              • W
                wishinghand last edited by

                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.

                Martin 1 Reply Last reply Reply Quote 0
                • druppy
                  druppy last edited by

                  You are welcome

                  1 Reply Last reply Reply Quote 0
                  • Martin
                    Martin @wishinghand last edited by

                    @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

                    1 Reply Last reply Reply Quote 1
                    • Martin
                      Martin @wishinghand last edited by

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

                      D 1 Reply Last reply Reply Quote 0
                      • D
                        davewallace @Martin last edited by

                        @Martin No that extra screenshot was useful, thanks 🙂

                        1 Reply Last reply Reply Quote 0
                        • D
                          davewallace last edited by

                          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 1 Reply Last reply Reply Quote 0
                          • Martin
                            Martin @davewallace last edited by 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

                            D arjanski 2 Replies Last reply Reply Quote 1
                            • D
                              davewallace @Martin last edited by

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

                              1 Reply Last reply Reply Quote 0
                              • arjanski
                                arjanski @Martin last edited by

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

                                1 Reply Last reply Reply Quote 0
                                • a47ae
                                  a47ae last edited by

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

                                  1 Reply Last reply Reply Quote 0
                                  • arjanski
                                    arjanski last edited by

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

                                    1 Reply Last reply Reply Quote 0
                                    • Martin
                                      Martin last edited by 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?

                                      1 Reply Last reply Reply Quote 1
                                      • First post
                                        Last post