q-drawer-link with dynamic routes

[dunsun]

Hey,

I use dynamic routes:
{ path: ‘tasks/:action’, component: load(‘Tasks’) }

So I can access /task/edit, /task/add, /task/list, …

First thing was that I had to manualy add a watcher for $route changes so that it could reflect an actual action variable in my templates. So far so good.

But when a specified route is choosen (clicked) q-drawer-link is not hightlighted as it usually is (for none dynamic routes).

Any tip ?

Thanks

[rstoenescu]

@dunsun Hi, are you specifying full routes for q-drawer-link? so for example “/task/edit”, “/task/add” etc? I think you may either specify “task/edit” or using a computed property for the routes? I need some more details please.

[Greg]

Hello

I relatively same problem with named route like this.

<q-drawer-link v-for=“cat in getUserCategorieList” icon=“pages” :to="{ name: ‘showcat’, params: { code: cat.code } }">
{{ cat.nom }}
</q-drawer-link>

routes: [{
        path: '/demarrage',
        component: load('demarrage'),
        name: 'demarrage'
    },
    {
        path: '/profil',
        component: load('profil'),
        name: 'profil'
    },
    {
        path: '/',
        component: load('Index'),
        children: [{
                path: '/accueil/',
                component: load('accueil'),
                name: 'accueil'
            },
            {
                path: '/showcat/:code',
                component: load('listcat'),
                name: 'showcat',
                props: true
            },
            {
                path: '*',
                redirect: { name: 'accueil' }
            }
        ]
    },
    // Default
    { path: '*', component: load('Error404') } // Not found
]

})

In my case, links and router works fine but all q-drawer-link are selected

Thank for help.

[Greg]

Hello
Resolved by using path and exact directives.

<q-drawer-link v-for=“cat in getUserCategorieList” icon=“pages” :to="{ path: ‘/showcat/’ + cat.code, exact: true }">
{{ cat.nom }}
</q-drawer-link>