Menu deselects when using parameter in route
craumix opened this issue · comments
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...
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
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?
alias can help here
{
title: 'Management',
icon: 'fa fa-cogs',
alias: '/management/user/:id'
}
Works perfectly, thanks!