q-drawer-link with dynamic routes

  • 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 ?


  • Admin

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

  • 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 }}

    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.

  • 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 }}

Log in to reply