Connecting to Vue Router with Menu component?

[Ben Hayat]

Hi;

Quasar Tab allows to be used with Vue Router via QRouteTab. This allows to use “To” property which page to load.

Is there such feature with QMenu?
Or, is there a sample or guideline how to use menu or Sub-menu to load a page in Roure-view section when a menu item is clicked or tapped on mobile?

Or, can we use Tree component as menu? if yes, how do we connect the nodes to the Vue router with “To” binding?
I prefer to use Tree.

Thanks!

[beets]

@Ben-Hayat q-menu doesn’t necessarily require that you put a q-list and q-item components inside, but I assume you’re talking about that case. If so, just put a :to prop on the q-item, as shown here: https://quasar.dev/vue-components/list-and-list-items#Connecting-to-Vue-Router

You also probably want to make sure to put the auto-close prop on the q-menu, like <q-menu auto-close> or v-close-popup on the q-item.

[Ben Hayat]

@beets
Thanks for the info. After posting I noticed the pattern as you provided. But my first inclination was that, Menu like Tab component would have the direct :to props.

BTW, I love Beets, juice them with Celery & carrots.

[beets]

@Ben-Hayat said in Connecting to Vue Router with Menu component?:

BTW, I love Beets, juice them with Celery & carrots

Throw a piece of ginger root in there and then you’ve got my attention!

[Ben Hayat]

@beets
Ah, forgot the ginger and Apple. And I also add one Jalapeno pepper and fresh garlic with the mix.
Gets real spicy. That’s actually counts as one meal, and I eat a normal lunch as my second meal.