Menu - vue-router integration is buggy

[mrin9]

Steps to reproduce

1. Set up vue-router with few navigations
2. Create a Menu few menu-items (provide router paths in to prop)
3. Select an menu-item by clicking, which will make it active (blue vertical bar on side)
4. Now type a different path on the browser's url, this will make the other associated item active in the menu, but will not remove the previously selected item (now I have a menu showing two items selected)

I checked the sidebar in the documentation site which is working perfectly with router, I initially thought it is <at-menu> component , but looks like it is not

Which browser?

All

What is expected?

upon typing a valid path, on browser's url, The menu must remove the previous selected item

What is actually happening?

The previous selected item is not removed

Reproduction Link

Sorry cant create a reproduction link as the use case is tied to browser's url.

[dsevillamartin]

I got this bug as well, and for me it seems that AT UI is not only checking for exact route paths, but also similar (like starting with, etc...).

Here's the classes on my Home menu item pointing to /:

Here are the classes for the same element when I click on another item and the path changes:

The router-link-exact-active class is dropped, but router-link-active remains, which led be to the conclusion illustrated at the beginning of this comment.

This is a nice feature, however there should be an option to disable it when needed, which usually includes the home (/) path.

UPDATE: router-link-exact-active is provided by vue-router (see https://router.vuejs.org/api/#exact-active-class), so the logic AT UI uses is definitely faulty here, whatever it's supposed to be doing.

[SeedyROM]

@datitisev Currently dealing with this bug, I tried solving at the AtMenuItem component level. No luck, I'll keep everyone posted and create a PR when done.

The styling also seems to be causing the issue, not the logic itself from what I can see. I went through and completely modified the AtMenuItem to have an exact prop, the styling for active turns on regardless of if the item actually is.

Update: I thought I found the issue, no luck.

[SeedyROM]

See PR https://github.com/AT-UI/at-ui/pull/143/, this might solve your issue. Still in development.