How to link to HTML pages from drawer

Mickey58

I’m a bit lost right now: I would like to add an initially simple help system to my Quasar app. It has as a regular QLayout with drawers left and right, and a page container in the middle. So I prepared a Quasar template with a so far pretty empty help component that is invoked from my main menu, which is able to display stuff in the page container. I also managed to open the left drawer from the help component through event bus.

Now I’m looking for some hints or sample code for

the links in the drawer that would point to help topics (can be individual HTML pages initially)
the routes and HTML pages.

Maybe there are better solutions, like injecting the HTML etc., open to any suggestions.

I looked at docs, but found that many things in the drawer area have changed in the last year or so, and lots of useful answer links in the docs and the forum are broken…

Is it true that q-sidelink, q-drawerlink are no longer supported? Many examples use those. And is there a current sample or some snippets of code how to do this?

Mickey58

I found a way to call a new Vue component (which injects the help HTML into its template), from a q-item in my drawer:
<q-item clickable @click="$router.replace(’/help/topic_1’)">

It seems to be not so straightforward to load HMTL files directly with Vue. Lots of discussions on it on the Web. Templating tools recommended (Webpack). No time to explore that currently.

Thought it’s always good to share the solution, even though I developed it myself in this case. Cheers.

Mickey58

I now have a slightly different question: My Quasar layout was generated by Quasar layout builder. Under the main app, I have routes for the main parts = ´Vue/Quasar components, which are routes (own pages). On the sides, I have the two drawers, which are children of the MyLayout.vue main component, like the other main parts of the app. The help component is one of those main components.

In this architecture, the drawer and the help component are siblings. Based on that it is difficult to control the help navigation in the drawer, and display the help information based on what is selected in the drawer. Needs cross-component communication through events. Hard to send data from the drawer to the help component (like help topic selected etc.), only through events…

What is the recommendation for such a use case? Make the help component a child of the navgiation component, which happens to be the drawer?

I’m struggling with this basic architectural design decision. The Layout Builder may have led me to a wrong pattern, where both are siblings.

metalsadman

@Mickey58 take time to read vue router docs https://router.vuejs.org/guide/essentials/named-views.html#nested-named-views

The Layout Builder may have led me to a wrong pattern, where both are siblings.

It just builds a layout template as a base for users to start on, it doesn’t introduce you to any architectural design/pattern, cause that’s for you to decide.

Mickey58

Thanks, @metalsadman, you’re my trusted advisor. I looked at the example under the link you posted.

I understand from it that I can create multiple, nested router views, where the nav (drawer in my case) resides in a different router-view than my help component.

The example is maybe simpler than my case, because it only has router-links in the nav that, depending on which router link the user selects in the nav component, then change the components rendered in the other “neighbor” router views, through router-updates.

Yes, similar to the code in the nested Vue router example, I started with a simple router-link between the drawer and a help component. But that was only the start, as I need a more complex communication between the nav in the drawer (which is a long, nested table of contents) and what is displayed in the help component. I would like the help to scroll on the help content, depending on what is selected in the nav in the drawer. And have maybe one help component with all the HTML, or one per main help chapter, not different help components per link in the nav.

If both the nav (drawer) and the help components are in two “neigbor” router views, if they are separate “sibling” Vue components, my problem remains that it will be hard to pass that kind of data from the nav/drawer component to the help component (unless I got things wrong). The reason is Vue’s concept that child components can’t see their parent’s data, and sibling components can’t see each other’s data either.

So I’m still led to believe that I need to put the drawer (navigator) and the help component into one component, with common data() to control navigation.

Do you agree with my conclusion or is there something where the different router views help me with this?

metalsadman

@Mickey58 that’s still covered in vue router docs, you can pass props to router components. and just like named views you can pass props to them.

Mickey58

Thanks, that’s what I’m probably missing, but where exactly is an example of that in the docs? Sorry to be a pain for you…

metalsadman

@Mickey58 https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode, i agree the examples here are simple, checked the advanced ones tho, links at bottom of the page.

Mickey58

Thanks much, @metalsadman. I was really unaware of that option to pass props as route parameters to components - in my case to the “sibling” component of the drawer component, which is the help component.

Unless I’m mistaken, I could indeed use that “Boolean mode”, since the HTML ids to which the help component needs to scroll (after selection of a router link in the nav in drawer) are statically known (per router link). So I could pass an HTML id (or maybe a Vue/Quasar ref) as a scroll target from the drawer component to the help component, along with the router link.

Need to test that. Thanks a lot for the hints, it would have taken me a lot more time to find that information on my own.

Out of curiosity: Does the Quasar doc (which has a navbar on the left), also use router links and Boolean mode to scroll to the right piece of help information displayed on the right?

metalsadman

@Mickey58 you can check the source at github repo it’s under docs folder, left drawer uses links by using to props while right drawer menu is populated by vuex according to which left drawer menu is chosen.

Mickey58

I have partial success: Changed my routes for the help component to:

{
        path: "/Hilfe/:helpTopicElementIdToScrollTo",
        name: "Hilfe",
        props: true, // New - use Boolean mode to pass props to component 
        component: () => import("pages/Hilfe.vue")
},

This allows me to pass this parameter :helpTopicElementIdToScrollTo (which is an id to a DOM element) to the help component. This is done in the drawer through q-items which control navigation, e.g.:

    <q-item class="q-my-sm" clickable @click="$router.replace('/Hilfe/1.1')">

The help component is then invoked through the router and successfully scrolls to that id’s position (“1.1” in the example) - partial success!

However, I fear my q-route-tab in the q-layout/q-tabs (= my “main menu”) to invoke the help component is still not optimal:

<q-route-tab to="/Hilfe/1.0" label="Hilfe" />

Not surprisingly, this invokes the help component always with the top level id (“1.0”) of the help content.

What I would like instead: Invoke the help component with the last id selected through q-item in the drawer.

Can you give me a hint what to change in q-route-tab or elsewhere to achieve this? I guess I need to pass parameters to a named route, but sorry I don’t get yet how to set that part up.

Mickey58

I got something working through storing the id of the help topic selected in the q-item in drawer in a variable (selectedHelpTopicId in data()). I’m passing that as a parameter to the router-link that invokes the help component in q-route-tab:

<q-route-tab
          :to="{ name: 'Hilfe', params: { helpTopicElementIdToScrollTo: this.selectedHelpTopicId }}"
          label="Hilfe"
/>

This makes the help component (when reopened through the q-route-tab in my main menu) scroll to the id of the position selected earlier in the drawer.

This does about 95% of what I wanted, with some minor room for further improvements. Thanks @metalsadman for your help.

No More Posting New Topics!

How to link to HTML pages from drawer