active state duplication
rizahoemae opened this issue · comments
hello, i have a question.
The top link is directed to /, but when the /profile is active, for example, the link above is also active. how to solve this? thanks.
[edited]
in case if question is not clear, i add some ways i use your sidebar in my project:
<sidebar-menu
v-if="isMember"
:menu="hrefMember"
width="288px"
:collapsed="true"
width-collapsed="64px"
:disable-hover="true"
>
<template #header
><div
class="flex relative items-center rounded-lg p-2 font-normal dark:text-white dark:hover:bg-gray-700"
>
<img
src="@/assets/logo-app.png"
class="px-4"
/></div
></template>
</sidebar-menu>
hrefMember: [
{
..
href: { name: 'dashboard' },
},
{
..
href: { name: 'profile' },
},
],
route.name = dashboard print route path /
route.name = profile print route path /profile
Can you provide a minimal reproduction or show me the routes config?
sure, here is routes config
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'home',
component: LayoutHome,
children: [
{
path: '',
name: 'dashboard',
component: Dashboard,
},
....
{
path: 'profile',
name: 'profile',
component: Profile,
},
],
},
],
})
as you can see above, the dashboard and profile are in the same state, under their parent (/)
Use exact
{
..
href: { name: 'dashboard' },
exact: true,
},
woah it works! thankyou for your help!!