Menu deselects when using parameter in route

[Sören Gürtler]

Hey, I'm having great success so far using the sidebar, but I can't figure out how to keep a menu item selected when using params.

I have the following in my router:

{
    path: '/management/user/:id',
    name: 'user-overview',
    component: UserOverview
  }

and this for the menu:

{
    href: {
        name: 'user-overview',
        params: {
            id: 0
        }
    },
    title: 'Users',
    icon: 'fa fa-user',
}

I'm aware that the current router config can't work like that, but I'm not sure how to match the route.

Possibly related to this:
#51
though I'm not exactly sure...

[yaminncco]

sorry but i don't understand the issue here, which route doesn't match? can you show me your menu and router config
and which version are you using

[Sören Gürtler]

Oh, sorry my mistake I'll clarify.
"vue-sidebar-menu": "^4.7.4"

These are my routes:

const routes = [
  {
    path: '/',
    name: 'dashboard',
    component: Dashboard
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/logout',
    name: 'logout',
    component: Logout
  },
  {
    path: '/management/user/:id',
    name: 'user-overview',
    component: UserOverview
  }
]

and this is the entire menu:

[
          {
            header: true,
            title: 'Main Navigation',
            hiddenOnCollapse: true
          },
          {
            href: '/',
            title: 'Dashboard',
            icon: 'fa fa-tachometer-alt'
          },
          {
            href: '/profile',
            title: 'Profile',
            icon: 'fa fa-address-card',
            disabled: true
          },
          {
            title: 'Management',
            icon: 'fa fa-cogs',
            hidden: !(this.$store.state.profile
              ? this.$store.state.profile.admin
              : false),
            child: [
              {
                href: {
                  name: 'user-overview',
                  params: {
                    id: 0
                  }
                },
                title: 'Users',
                icon: 'fa fa-user',
              },
              {
                href: '/management/system',
                title: 'System',
                icon: 'fa fa-server',
              }
            ]
          },
          {
            href: '/logout',
            title: 'Logout',
            icon: 'fa fa-sign-out-alt'
          }
      ]

To clarify, my UserOverview component lets you select a user, which then changes the url.
For example to management/user/603eb9b7536d1862ba10df26 depending on the selected user, replacing the :id in the url with the users id.

So the problem I'm having now is, when selecting { href: { name: 'user-overview', params: { id: 0 } }, title: 'Users', icon: 'fa fa-user', } it routes to management/user/0 as expected, but as soon as I select a user in the UserOverview component and the url changes to management/user/603eb9b7536d1862ba10df26 for example, the menu deselects and closes the submenu. Is there a way to keep the menu selected for any id?

[yaminncco]

alias can help here

{
  title: 'Management',
  icon: 'fa fa-cogs',
  alias: '/management/user/:id'
}

[Sören Gürtler]

Works perfectly, thanks!